从零开始学习前端开发 — 14、CSS3变形基础

时间:2021-03-23 18:05:59

一、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);}