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

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