css-变形动画

基础知识

坐标系统

要使用元素变形操作需要掌握坐标轴，然后通过改变不同坐标来控制元素的变形。
共有三个轴，就跟高中学的立体坐标系类似。

• X轴是水平轴
• Y轴是垂直轴
• Z轴是纵深轴

变形操作

使用 transform 来控制元素变形操作，包括控制移动、旋转、倾斜、3D转换等

选项	说明
none	定义不进行转换
translate(x,y)	定义2D转换
translate3d(x,y,z)	定义3D转换
translateY(y)	定义转换，只是用y轴的值
translateZ(z)	定义转换，只是用z轴的值
scale(x,y)	定义2D缩放转换
scale3d(x,y,z)	定义3D缩放转换
scaleX(x)	通过设置X轴的值来进行缩放转换
scaleY(y)	通过设置y轴的值来进行缩放转换
scaleZ(z)	通过设置z轴的值来进行缩放转换
rotate(angle)	定义2D旋转，在参数中规定角度
rotate3D(x,y,z,angle)	定义3D选择
rotateX(angle)	定义沿着X轴的3D旋转
rotateY(angle)	定义沿着Y轴的3D旋转
rotateZ(angle)	定义沿着Z轴的3D旋转
shew(x-angle,y-angle)	定义沿着X和Y轴的2D倾斜转换
shewX(angle)	定义沿着X轴的2D倾斜转换
shewY(angle)	定义沿着Y轴的2D倾斜转换
perspective(n)	为3D转换元素定义透视视图

变形叠加

重复设置变形操作时只在原形态上操作。

默认处理

transform:translateX(n);   用translate设置时，如果重复设置移动距离，只有后面一个会生效

位类叠加

使用hover伪类操作时，会回到伪类中设置的位置

行级元素

行级元素不产生变形效果，将其转为 inline-block 或 block 以及弹性元素时都可以产生变化效果。

---

位类状态

伪类	说明
:hover	鼠标移动上后发生改变
:target	鼠标点击发生变化

---

移动元素

• 沿X轴移动时正值向右移动、负值向左移动
• 沿Y轴移动时正值向下移动、负值向上移动
• 如果使用百分数将控制元素的原尺寸计算百分比然后移动
• 可同时设置多个值，解析器会从左向右依次执行
• 变形是在原基础上更改，即第二次设置值时不是在第一次值上变化

translateX

正值向右移动、负值向左移动。

translateY

正值向下移动、负值向上移动。

translate

使用 translate 可以控制按X、Y同时移动操作，第一个值控制X移动，第二个值控制Y移动。

百分比移动

元素宽度为100px设置50%时将移动50px，即百分比是指元素的尺寸的百分比。

元素居中

居中可以使用多种方式，如弹性布局、定位操作，下面来看使用移动操作居中。

position: absolute;
 left: 50%;
 top: 50%;        /*position定位的是左上角，所以需要用transform移动来修正位置。
 transform: translate(-50%, -50%);

translateZ

控制Z轴移动，正数向外、负数向里移动。因为Z轴是透视轴没有像X/Y一样的固定尺寸，所以不能使用百分数。

transform-style: preserve-3d;  这一条语句可以让视角变成3D，否则观察不到z轴变化的效果。
transform: perspective(900px) rotateY(60deg);   这条语句进行透视 和绕Y轴旋转60度

translate3d

用于同时控制X/Y/Z轴的移动，三个值必须输入如果某个轴不需要移动时设置为零。

---

缩放元素

举例：数值为2时，表示为原尺寸的两倍。

scaleX

沿X轴缩放一半

transform:scaleX(.5);

scaleY

沿Y轴缩放一半

transform:scaleY(.5);

scale

同时设置X、Y轴缩放

scaleZ

沿Z轴缩放，需要3D透视才可见

scale3D

沿XYZ三个轴绽放元素，这个绽放用的很经典。

---

旋转操作

利用CSS可以控制元素按照不同的坐标轴进行旋转。

rotateX

控制元素安装X轴进行基本的旋转。

基本使用

transform:rotateX(90deg);   元素不可见

父级透视

当X轴旋转90deg后将无法看到元素，这时可以控制父级旋转从上看子元素。

稍后详解

rotateYrotateZ同理

参数顺序

参数顺序会对旋转方向产生影响。

transform:rotateX(60deg) rotateY(90deg);
transform:rotateY(90deg) rotateX(60deg);
效果不一样

例子：

• 旋转文字
• 电子时钟

---

倾斜操作

skewX
沿X轴倾斜元素

例子：

• 按钮特效
• 立体按钮

---

变形基点

使用transform-origin 设置元素的X、Y、Z操作的基点，用于控制旋转、倾斜等操作。

• 默认以元素中心进行旋转，改变基点后可以照任意点进行旋转
• 元素移动不受变形基点影响 例如 transform:translateX(90deg)
• 基点是元素原始空间位，而不是translate移动之后的位置

例子：

• 平面旋转
• 倾斜控制
• 三维旋转

变形顺序的影响

设置transform变形的前后顺序对变形结果是有影响
若设置origin在 rotate之前，则会按照新的rotate旋转，在之后则不会
例子：

• 变形顺序的影响
• 新年贺卡
• 动感菜单

---

透视景深

perspective

• 使用perspective来控制元素的透视景深
• perspective规则为舞台控制景深，perspective属性为单个元素设置景深

舞台透视

perspective规则将整个父级作为透视元素，会造成里面每个元素的透视是不一样的。

单独透视

perspective函数为元素单独设置透视，所有应用相同函数的元素看起来透视都一个样

---

3D透视

transform-style 控制3dtous

• 应用于舞台即变形元素的父级元素
• 设置overflow：visible 时，preserve-3d无效

选项	说明
flat	2D平面舞台
preserve-3d	3D透视舞台

例子：

• 三维图集

---

观看视角

perspective-origin 用于控制视线的落点，就像我们眼睛看物体时的聚焦点。
需要设置perspective透视后才可以看到效果

• 一般用于在舞台上控制子元素

位置参数

取值	说明
x-axis	定义该视图在X轴上的位置。 默认：50% 合理值：% left 等
y-axis	定义该视图在Y轴上的位置。 默认：50% 合理值：% left 等

例子：

• 参数位置效果体验
• 立方体

---

隐藏背面

backface-visibility 控制是否可以看到元素的背面

• 一般设置在元素上，而不是舞台上
• 设置在舞台上(父元素) 时，需要给父元素设置transform-style:preserve-3d 有效

选项	说明
visible	背面可见
hidden	背面隐藏

例子：

• 翻转卡片

---

常见问题

如果发现元素不能点击，可能是父元素设置了 transform-style:preserve-3d属性，且同级元素设置了3D变化特性，造成对点击元素被遮挡。

解决办法：

• 对变形元素设置 pointer-events: none; 让他不接受点击事件
• 删除父级的 transform-style:preserve-3d 属性

本博客提到的例子，请访问我的github查看 https://github.com/shuaijiumei