translate3d

CSS3中translate，transform和translation的区别和联系

translate 同其他属性rotate/skew/scale等，构成css中变形的几种方式。translate(x, y) 是将dom元素，在原来的基础上，偏移一定距离。translate需要跟transform结合使用。transform css中的变形属性transition 是制作居间动画的一种方式，可以指定“渐变”的css属性，如width，height，top，left，opacity，transform等。还可以指定渐变动画的duration（持续时间），delay（推迟时间），渐变函数（ease、ease-in/out、cubic-bezier等）。举例说明：将元素向下偏移20像素，向右偏移20像素 transform: translate(20px, 20px);当对元素应用变形（transform）属性时，延迟一秒后开始动画，动画速度开始慢，然后加速，最后慢慢结束，动画持续300毫秒 transition: transform 300ms ease 1s; 此时如果你对元素应用transform: translate(20px, 20px);时，一秒钟后，dom元素会逐渐往右下方向移动，直到距离原来下方20像素，右方20像素的位置后停止，动画持续300毫秒。

CSS3中translate，transform和translation的区别和联系

translate:移动，transform的一个方法
通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数：
用法transform: translate(50px, 100px);
-ms-transform: translate(50px,100px);
-webkit-transform: translate(50px,100px);
-o-transform: translate(50px,100px);
-moz-transform: translate(50px,100px);

transform:变形。改变
CSS3中主要包括 旋转：rotate() 顺时针旋转给定的角度，允许负值 rotate(30deg)
扭曲：skew() 元素翻转给定的角度,根据给定的水平线（X 轴）和垂直线（Y 轴）参数：skew(30deg,20deg)
缩放：scale() 放大或缩小，根据给定的宽度（X 轴）和高度（Y 轴）参数： scale(2,4)
移动：translate() 平移，传进 x,y值，代表沿x轴和y轴平移的距离
所有的2D转换方法组合在一起： matrix() 旋转、缩放、移动以及倾斜元素
matrix(scale.x ,, , scale.y , translate.x, translate.y)
改变起点位置 transform-origin: bottom left;

综合起来使用：transform: 30deg 1.5 30deg 20deg 100px 200px;

transition: 允许CSS属性值在一定的时间区间内平滑的过渡，
需要事件的触发，例如单击、获取焦点、失去焦点等
transition:property duration timing-function delay;
property:CSS的属性，例如：width height 为none时停止所有的运动，可以为transform

duration:持续时间
timing-function:ease等
delay:延迟
注意：当property为all的时候所有动画
例如：transition:width 2s ease 0s;
http://www.w3cplus.com/content/css3-transition

transform的使用方法

transform的含义是：改变，使…变形；转换 在排版当中去合理的使用transform会使我们的排版看起来高大上那么一点。 接下来给大家介绍一下这个神奇的小东西都有什么属性会有什么效果。 rotate：通过指定的角度参数对原元素指定一个效果。 如果设置的值为正数表示顺时针旋转，如果设置的值为负数，则表示逆时针旋转。如：transform:rotate(30deg)； translate() 根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。 如：transform:translate(100px,20px): 缩放scale和移动translate是有点相似的，也是有三种情况：下面我们具体来看看这三种情况具体使用方法： 注意：默认值是1，它的值放大是比1大，缩小比1小。 1、scale(x,y) 定义 2D 缩放转换，改变元素的宽度和高度。 如：transform:scale(2,1.5); 。 2、scaleX( n ) 定义 2D 缩放转换，改变元素的宽度。 如：transform:scaleX(2): 3、scaleY( n ) 定义 2D 缩放转换，改变元素的高度。 如：transform:scaleY(2): 1、skew( x-angle , y-angle ) 定义 2D 倾斜转换，沿着 X 和 Y 轴。 如：transform:skew(30deg,10deg); 2、skewX( angle ) 定义 2D 倾斜转换，沿着 X 轴。 如：transform:skewX(30deg); 3、skewY( angle ) 定义 2D 倾斜转换，沿着 Y 轴。 如：transform:skewY(10deg); matrix(, , , , , ) ： 以一个含六值的(a,b,c,d,e,f) 变换矩阵 的形式指定一个2D变换，相当于直接应用一个[a b c d e f]变换矩阵。就是基于水平方向（X轴）和垂直方向（Y轴）重新定位元素,此属性值使用涉及到数学中的矩阵。 改变元素基点 tranform-origin

transition和transform属性的区别

前者强调的是看不见的变化，后者强调的看得见的变化。
transition
英[trænˈzɪʃn] 美[trænˈzɪʃən, -ˈsɪʃ-]
n. 过渡，转变，变迁; [语] 转换; [乐] 变调;
[例句]The French say they favour a transition to democracy.
法国人说他们倾向于向民主过渡。
[其他] 第三人称单数：transitions 复数：transitions 现在分词：transitioning过去式：transitioned 形近词： transiting transitive transitron

transformation
英[ˌtrænsfəˈmeɪʃn] 美[ˌtrænsfərˈmeɪʃn]
n. 变化; 转换; 转换; 变换;
[例句]This extraordinary transformation of the region?
这个地区发生了惊人的变化？
[其他] 复数：transformations 形近词： neoformation reformation malformation

css中transform的使用

1.对于行内元素是无效的 2.会保留原来的位置,提高盒子的层级 与relative相对定位类似 transform: translate(X,Y) 1.填入具体数值,例如 translate(10px,10px) ,需要填写单位,元素将会向右位移10px,向下位移10px; 其中如果数值为负数,则位移的方向相反 2.填入百分比数字,例如 translate(10%,10%) ,元素将会向右位移 自身元素 的width 10%距离和向下位移 自身元素 的height 10%距离 transform: rotate(X); 需要在X位置填写相对应的旋转角度,并带上单位deg,例子: rotate(90deg) 元素将会默认在自身的垂直水平居中点进行旋转对应的X度 transform-origin: X Y 可以通过改变元素的该属性,导致元素旋转的原点进行改变 1.填入的X Y值为方位名词,例如top\bottom\left\right 例子: transform-origin: left top; 元素将在元素的左上角为原点进行旋转运动 transform: scale(X); 可以通过改变元素的该属性,导致元素进行X倍的缩放;X为负数时将会产生镜面效果 例子: transform: scale(1.2); 元素将变为原来的1.2倍. transform连写,如果有发生平移,都需要先写平移属性 例子 transform: translateX(300%) rotate(360deg); 可以在发生transform的元素中设置transition属性 例子: transition: 1s; 代表触发元素发生变化后,变化将于1s内完成

css3系列之transform 详解rotate

rotate 　　rotateX 　　rotateY 　　 rotateZ 　　rotate3d rotate： 旋转该元素，配合着transform-origin属性，transform-origin 是设置旋转点的。(没有设置transform-origin 属性也可以，只不过是根据该元素的中心点旋转，也就是center center) 加上 transform-origin 设置旋转点。transform-origin 是根据自己而定位的，所以 0px 0px 就是左上角那个点。 rotateX： 讲这个之前呢， 先普及一个知识， 在transform里面，x y z 轴，分别是什么样子的，他跟我们平常的 x 和 y 不太一样，因为， 他是倒着的。 Z轴呢，在0 那个位置，因为他是3D的，看下面的图，转个身就知道在那里了。 接下来，看看 所谓的 Z 轴是什么 rotateX 的X呢，可以写成大写的，也可以写成小写的x， 没有影响，这个属性呢，你加上rotateX 之后，这个元素，就会以 X 轴 旋转，里面填的是角度。 这样看起来，好像不是那么直观，毕竟是2D 的图， 来给他加了3D 的效果看看，(由于设置了 transform-origin：0 0，所以并不会在元素的中间旋转，而是以 0 0 点的那条x 轴旋转) 上面两个图，第一个图是在 2d的 情况下观看的，第二个图是 3d的时候， 是不是 3d 看起来比较直观。 那么，接下来，加上Y 一起使用，rotateX(45deg) rotateY(45deg)，这两个合在一起什么意思呢， 这个元素，先按照 X轴，旋转45度，然后再按照Y轴，旋转45度，那么接下来的结果会是怎么样呢？ 由于我设置的 transform-origin：center center ；定的点在中心，那么两条轴，是会成这样子的。 然后，看下，结果，是不是如我们所示？ 最后，加上rotateZ rotate3D： 设置一条主轴，然后根据这条轴旋转 这个呢，可以设置4个参数， 前三个是，x y z 最后一个是 角度deg 但是，此 x y z ，可不是上面那几个，不一样的。这三个值，设置的是矢量的方向，填什么无所谓，主要是比值很重要。举个例子 1，1，0，0deg 那么就是 1：1：0 = 100：100：0 对吧，拿这个值来图解比较好。

如何用JS获取translate3d中的数值

获取代码如下：

var style = document.getElementById('test').style;
var transform = style.transform || '';
var transformY = transform.match(/translate3d\(\d+px,\s*(\d+)px,\s*(\d+)px\)/i)[1];
解释：
style是id为test的div的style属性

transform是style规则中的transform属性，此处忽略前缀问题，如果需要取-webkit-transform则可以通过WebkitTransform获取
transform.match(/translate3d\(\d+px,\s*(\d+)px,\s*(\d+)px\)/i)[1];获取translate3d第二个参数的数值，此题中为50

CSS3中的动画效果transform:translateZ()，在Z轴上移动xx距离

下面这个代码在Chrome上运行没问题啊：其他浏览器上如果没效果，可自行添加前缀再试。注意：只有IE10+、FireFox、Chrome、Safari才支持3D转换效果。拓展：1、CSS即层叠样式表(Cascading StyleSheet)。 在网页制作时采用层叠样式表技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。2、CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。这些模块包括: 盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等。

HTML5如何在网页中实现3D效果

CSS3除了为开发者提供二维变形之外，还将动画从二维平面推动到了三维立体状态，能够实现真正的三维特效。三维变形和二维变形一样，均使用的是transform属性。想要触发三维变形有两种方式：一种方式是通过语法告知浏览器“请采用三维方式进行变形处理”，另一种方式是直接使用CSS3三维变形的语法。触发方法1：告知浏览器变形方式-webkit-transform-style:preserve-3d;Tips：IE不支持三维变形，在移动端，绝大多数的浏览器均为WebKit内核，因此，在此句代码之前需要书写-webkit-的前缀内核。Tips：不要为body元素设置-webkit- transform-style: preserve 3d,否则会对position:fixed定位的元素造成布局影响。在开发当中，如果当前元素属于body的子级元素，又希望应用三维变形，则在body和当前元素之间多嵌套一层结构，并为这层元素应用三维变形即可。触发方法2：直接使用CSS3变形语法 言成科技/title> .box1 { width: 150px; height: 150px; border: 2px solid blue; } .box1 div { height: 150px; background: rgba(0, 0, 0, 0.5); -webkit-transform: translate3d(30px, 60px, 20px) rotateX(30deg); transform: translate3d(30px, 60px, 20px) rotateX(30deg); } 具体三维变形的具体属性详见《CSS3-3D相关知识详解—视角以及变形方向》3D效果制作需求制作一个立方体，并进行旋转代码实例 言成科技 .main-bac { -webkit-perspective:1500; } /*设定透视距离*/ .main{ width:200px; height:200px; margin: 0 auto; position:relative; -webkit-transform-style:preserve-3d; -webkit-transition:-webkit-transform 2s ease 0s;/*过渡时间*/ } /*基本样式*/ .main p{ position: absolute; margin: 0; padding: 0; width: 200px; height: 200px; text-align: center; line-height: 200px; font-size: 26px; opacity:0.5; } /*将第一个元素Z轴向前移动100px，形成第一个面（正面）*/ .main p:nth-of-type(1) { background-color:red; -webkit-transform:translateZ(100px); } /*将第一个元素Z轴向前移动100px，绕x轴旋转90度形成上面的面*/ .main p:nth-of-type(2) { background-color:orange; -webkit-transform:rotateX(90deg) translateZ(100px); } /*将第一个元素Z轴向前移动100px，绕x轴旋转-90度形成下边的面*/ .main p:nth-of-type(3) { background-color:yellow; -webkit-transform:rotateX(-90deg) translateZ(100px); } /*将第一个元素Z轴向前移动100px，绕y轴旋转90度形成右侧的面*/ .main p:nth-of-type(4) { background-color:green; -webkit-transform:rotateY(90deg) translateZ(100px); } /*将第一个元素Z轴向前移动100px，绕y轴旋转-90度形成左侧的面*/ .main p:nth-of-type(5) { background-color:#b435bf; -webkit-transform:rotateY(-90deg) translateZ(100px); } /*将第一个元素Z轴向前移动100px，绕y轴旋转180度形成后面（背面）*/ .main p:nth-of-type(6) { background-color:blue; -webkit-transform:rotateY(180deg) translateZ(100px); } /*鼠标移入时绕Y轴旋转180度，绕Z轴旋转180度*/ .main:hover {-webkit-transform:rotateY(180deg) rotateZ(180deg); } 言成科技

3D立方体

HTML5学堂

3D立方体

码匠

JavaScript 代码解析当鼠标移入的时候，立方体逐渐的发生旋转（非突变），围绕X轴旋转45度的同时，围绕Y轴旋转45度。当鼠标移出立方体时，立方体恢复到初始状态。在最开始状态时，并没有采用无限远的视角，设置一定的视角，让刚开始时直视立方体时，不会觉得是一个平面。3D效果制作-目标效果图以上资料来源：《HTML5布局之路》