css3系列之transform详解translate
translate translate这个参数的，是transform 身上的，那么它有什么用呢？ 其实他的作用很简单，就是平移，参考自己的位置来平移 translate() translateX() translateY() translateZ() translate3d() translateX 向X轴平移，填正数往右平移，填负数，往左平移 translateY 向Y轴平移，填正数往下平移，填负数，往上平移 translateZ 向Z轴平移，这个可能有点难理解，想像一个场景，你现在和电脑屏幕的距离，这就是Z轴的距离，电脑屏幕离你越近，那么translateZ() 里面的值 越大， 电脑屏幕离你越远， translateZ() 的值就越小。 所以说，Z 增加，那么这个电脑屏幕，离你就越近， 下面要用到旋转，rotate，不懂的话，请点击→ css3系列之transform 详解rotate 首先Z 轴是朝向我们的，所以 看不出效果，但是，我们把它转个身，让Z轴 面对 右边，就可以了。 translate() 和 translate3d() translate 是同时设置 translateX 和 translateY， 所以里面可以填两个参数， 第一个值 X 第二个 Y translate3d 是同时设置 translateX ，translateY 和 translateZ 所以里面可以填三个参数 只不过有点不同的是， translate 如果第二个参数不填的话，默认是0， 不过translate3d的话，人家就不同意你不填了，你三个参数，必须都给我填。
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内完成
