浏览器支持情况
Internet Explorer 10、Firefox 以及 Opera 支持 transform 属性。
Chrome 和 Safari 需要前缀 -webkit-。
注释:Internet Explorer 9 需要前缀 -ms-。
translate() 方法
通过 translate() 方法,元素从其当前位置移动,根据给定的 left(x 坐标) 和 top(y 坐标) 位置参数:
实例
div { transform: translate(50px,100px); -ms-transform: translate(50px,100px); /* IE 9 */ -webkit-transform: translate(50px,100px); /* Safari and Chrome */ -o-transform: translate(50px,100px); /* Opera */ -moz-transform: translate(50px,100px); /* Firefox */ }
值 translate(50px,100px) 把元素从左侧移动 50 像素,从顶端移动 100 像素。
相关推荐
CSS3绘制卡通闹钟摇晃动画特效是一款个性无图片纯CSS3代码制作的小动画特效。
这个插件汇集了15种使用css3制作的鼠标hover图片动画效果。主要的css技术包括3D translate、transform、transition和伪元素。当鼠标悬停到图片上,图片的标题以各种新颖的动画方式出现。
jQuery Animation的工作原理是通过将... 像CSS3好多效果因为不是数值的,所以是没有办法直接通过animate()方法实现的。如translate(), rotate(), scale(), skew(), matrix(), rotateX(), rotateY()等方法,这些方法的一
用到了CSS3的transition, transform 和 translate组合形成效果,非动画
ctx.translate(this.p.x, this.p.y); ctx.scale(this.s, this.s); ctx.fillStyle = 'hsla(' this.cl ', 100%, 50%, 0.5)'; ctx.beginPath(); ctx.arc(0, 0, 2, 0, Math.PI * 2); ctx.fill(); ctx....
2过渡属性课堂任务过渡动画综合应用要求:1、左上角圆形设置动画(移动)2、鼠标悬停出现图片3、鼠标悬停“哪有……”,文字变大加粗变颜色3转换应用CSS3 转换是对元素进行移动、缩放、转动、拉长或拉伸。3转换应用...
响应式链接特效,鼠标放在上面,立方体就会旋转,同时链接是旋转显示出来,可上下旋转,也可左右旋转,两个都是这样的,我们可以学习用HTML5 css3技术生成立方体特效,另外是一些CSS3中动画属性元素的使用方法,...
├01 css3元素选择器 属性选择器 伪类选择器.mp4 ├02 css3文本选择器 表单选择器 子选择器.mp4 ├03 rgba 字体单位 text-shadow box-shadow.mp4 ├04 盒子尺寸 box-sizing 分栏 background-size linear-gradient ...
会动的盒子机器人[PC与移动端皆可] 使用css3的perspective,transform[translate,rotate]实现
transform指变换、变形,是css3的一个属性,和其他width,height属性一样 translate 是transform的属性值,是指元素进行2D变换,2D变换就是指,元素以当前位置(0,0)按照x轴的方向移动多少,按照y轴的方向移动多少 ...
本文主要给大家介绍的是如何使用javascript判断CSS3动画效果结束,主要是使用了javascript的回调函数,其思路是一旦动画或变换结束,回调函数就会触发。不再需要大型类库支持,非常的简单实用,推荐给大家。
纯css3实现了一个正六边形的走马灯效果,记录一下css3动画的学习情况,效果如下: 主要用到的css3技术有:keyframes、perspective、perspective-origin、transform(translate、rotate)、animation、transform-...
transform: scale();缩放在IE浏览器下会有抖动 transform缩放在IE浏览器下会有抖动 可以在缩放的同时添加一个旋转 如: transform: scale(1.2); 换成: transform: scale(1.2) rotate(0.1deg);...clac是css3
这是一组共4种效果非常炫酷的CSS3移动手机滑动隐藏侧边栏菜单特效。这四种效果分别是:默认的点击滑动侧边栏菜单效果、带3D transforms的滑动侧边栏效果、文字缩放和淡入淡出效果的滑动侧边栏以及使用translate来...
3D旋转立方体(HTML+CSS3)源码 主要知识点:css3的transform,rotate,translate,animation等动画, 以perspective,transform-style等属性为辅助
使用CSS3会获得非常理想的效果 复制代码代码如下: transform: translate3d(80px, 150px, 0px) rotate(1220deg); transition: transform 30s linear 0s; 上面一个属性表示图像变换 translate3d(80px, 150px, 0px) ...
通过CSS3中的的translate(),rotate(),scale()实现心形的2D绘制和缩放动画
这是一个利用CSS3的动画属性实现的结合lowpoly(低多边形风格)的效果,主要利用了CSS3 transform属性的rotate旋转,translate移动,scale缩放,CSS代码部分非常简单,唯一有趣的是 nth-of-type选择器的使用,这里UI...
CSS3的2D转换2.1 transform2.2 rotate() 方法2.3 skew() 方法2.4 scale() 方法2.5 translate() 方法3. CSS3过渡3.1 transition3.2 pointer-events3.3 backface-visibility 1. CSS3渐变 CSS3 Gradient 分为线性渐变...