一、css3变形:
transform:rotate(旋转)|scale(缩放)|skew(倾斜)|translate(位移);
注:当多种变形方式综合在一起时,用空格隔开
1.旋转
a) rotateX(180deg) 沿x轴翻转 等价于 rotate3d(1,0,0,180deg)
b) rotateY(180deg) 沿y轴翻转 等价于 rotate3d(0,1,0,180deg)
c) rotate(60deg) 2d空间的旋转,正值为顺时针,负值为逆时针
d) rotateZ(180deg) 沿z轴翻转 等价于 rotate3d(0,0,1,180deg)
注:旋转单位为deg
2.缩放
a) scaleX(1.5) 沿x轴缩放,默认为1,不放大不缩小,值大于1时放大,小于1时缩小
b) scaleY(0.5) 沿y轴缩放
c) scale(1.5) 沿x轴和y轴同时缩放
d) scaleZ(1.5) 沿z轴缩放
3.倾斜
a) skewX(30deg) 沿x轴倾斜,单位为deg
b) skewY(-30deg) 沿y轴倾斜
c) skew(30deg,15deg) 沿x轴和y轴同时倾斜
skewX(30deg) skewY(15deg) x轴和y轴同时倾斜,效果不同于上面的写法
4.位移
a) translateX(200px) 沿x轴位移,向右为正,向左为负
b) translateY(-200px) 沿y轴位移,向上为负,向下为正
c) translate(100px) 默认不指定轴时,沿x轴位移
translate(100px,100px) 沿x轴和y轴同时位移
等价于
translateX(100px) translateY(100px)
d) translateZ(100px) 沿z轴位移,向前为正,向后为负,设置沿z轴的位移时,需要给父元素添加透视
注:如何使用translate实现不定宽高元素在屏幕窗口或父元素中水平垂直都居中
实现方式如下:
元素{
position:fixed|absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%);
}
二、改变变形中心点位置
transform-origin:left|center|right top|center|bottom;
三、变形综合
当我们将多种变形方式结合在一起时,改变顺序,效果有可能会不同
eg: transform:rotate(360deg) scale(1.5); 调换顺序,效果一样
transform:translateX(500px) rotate(360deg); 调换顺序,效果不一样
四、设置元素在2d空间变形还是3d空间变形
语法: transform-style:flat(默认值)|preserve-3d;
flat 2d变形
preserve-3d 3d空间的变形
五、透视,井深
描述:用来设置观察者距离物体的距离(3d效果的强度)
语法:
父元素{perspective:数值+单位;}
子元素{transform:perspective(300px) rotateY(45deg);}