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内完成
CSS3的transform属性的用法？
定义和用法transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。语法transform: none|transform-functions;旋转 div 元素：div{transform:rotate(7deg);-ms-transform:rotate(7deg); /* IE 9 */-moz-transform:rotate(7deg); /* Firefox */-webkit-transform:rotate(7deg); /* Safari 和 Chrome */-o-transform:rotate(7deg); /* Opera */}
CSS transform中的rotate的旋转中心怎么设置
1：使用transform-origin属性2：第一种：可以设置top、left、bottom、right；分别是元素上方，左侧，下方，右侧的中点（旋转中心）3：第二种可以设置具体的数值，例如transform-origin:0 0;//设置的是x轴上为0，y轴上为0，也就相当于是元素左顶点transform-origin:10% 10%;//设置的是x轴上为10%的长度，y轴上为10%的长度具体的旋转中心点可以多写几个测试一下，原理就是以元素左侧顶点为原点，二维的话只有x轴和y轴，三维的话也会有z轴
