变形动画

基础知识

坐标系统

要使用元素变形操作需要掌握坐标轴，然后通过改变不同坐标来控制元素的变形。

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

变形操作

使用 transform 规则控制元素的变形操作，包括控制移动、旋转、倾斜、3D转换等，下面会详细介绍每一个知识点。

下面是CSS提供的变形动作。

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

变形叠加

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

默认处理

下面设置了两次移动，并不会移动550px而是只移动50px。

<style>
    div {
        transform: translateX(500px);
        width: 100px;
        height: 100px;
        background: #9b59b6;
    }

    div:nth-child(1) {
        transform: translateX(50px);
    }
</style>

<div></div>

伪类叠加

<style>
    div {
        transition: 2s;
        transform: translateX(200px) translateX(50px);
        width: 100px;
        height: 100px;
        background: #9b59b6;
    }

    div:hover {
        transition: 2s;
        transform: translateX(100px);
    }
</style>

<div></div>

行级元素

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

伪类状态

:hover

鼠标移动上后发生改变。

article div:nth-child(2):hover {
	transform: rotate(180deg);
}

:target

以下操作变化时间为零秒，通过掌握后面的过渡动画可以控制变化时间。

aside:target {
    display: block;
    transform: translateY(150px);
    box-shadow: 0 0 10px #ddd;
}

移动元素

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

translateX

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

translateY

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

translate

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

百分比移动

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

元素居中

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

<style>
    body {
        height: 100vh;
    }

    main {
        width: 400px;
        height: 400px;
        border: solid 5px silver;
        position: relative;
    }

    main div {
        width: 100px;
        height: 100px;
        background: blueviolet;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
</style>

<main>
    <div></div>
</main>

translateZ

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

<style>
    * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
        list-style: none;
    }

    body {
        width: 100vw;
        height: 100vh;
        background: #34495e;
    }

    main {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 200px;
        height: 200px;
        transform-style: preserve-3d;
        transition: 2s;
        transform: perspective(900px) rotateY(60deg);
    }

    body:hover main {
        transform: perspective(600px) rotateY(60deg) scaleZ(5);
    }

    div {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #f1c40f;
    }

    div.b {
        background: #8e44ad;
        transform: translateZ(-100px);
    }
</style>

<main>
    <div class="f"></div>
    <div class="b"></div>
</main>

translate3d

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

渐变表单

页面切换

缩放元素

比如数值为2时表示为原尺寸的两倍。

scaleX

transform: scaleX(.5);沿X轴缩放一半。

scaleY

transform: scaleY(.5);沿Y轴缩放一半。

scale

使用scale可同时设置 X/Y 轴的缩放，如果只设置一个值时表示两轴缩放相同。

使用数值定义缩放，如 .5 表示缩小一半，2 表示放大两倍。

scaleZ

沿Z轴缩放元素，需要有3D透视才可以查看到效果。

scale3d

沿X/Y/Z三个轴绽放元素。

菜单缩放

旋转操作

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

rotateX

控制元素按照X轴进行旋转操作。

rotateY

按垂直轴旋转，如果旋转90deg 将不可见。

rotateZ

没Z轴旋转元素，效果就是沿X/Y轴的平面旋转。

rotate

在X与Y轴平面旋转，效果与使用 rotateZ 相同。

rotate3d

同时设置X/Y/Z轴的旋转向量值来控制元素的旋转。

需要同时设置如下四个参数

rotate3d(tx,ty,tz,angle)

tx/ty/tz 1 需要 0 不需要转 angle 角度

倾斜操作

skewX

沿X轴倾斜元素

skewY

沿Y轴倾斜元素

skew

同时设置X/Y轴倾斜操作，不指定第二个参数时Y轴倾斜为零。

按钮特效

立体按钮

变形基点

使用 transform-origin 设置元素的X/YZ操作的基点，用于控制旋转、倾斜等操作。
- 旋转默认以元素中心进行旋转，改变基点后可控制旋转点位置
- 元素移动不受变形基点所影响
- 基点是元素原始空间位，而不是translate移动后的空间位

语法：

transform-origin: x-axis y-axis z-axis;

值	描述
x-axis	[left \| center \| right \| length \| %]
y-axis	[left \| center \| right \| length \| %]
z-axis	length

新年贺卡

动态菜单

透视景深

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

3D透视

使用 transform-style 用于控制3d透视。
- 应用于舞台即变形元素的父级元素
- 设置 overflow:visible 时 preserve-3d 才无效

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

观看视角

perspective-origin

perspective-origin用于控制视线的落点，就像我们眼睛看物体时的聚焦点。可以理解眼镜看物体的位置，比如看一台汽车，是在看车头左边看还是车头右边看。

需要设置 perspective 透视后才可以看到效果。

一般设置在舞台元素上来控制子元素

参数

取值	说明
x-axis	[left \| center \| right \| length \| %]
y-axis	[left \| center \| right \| length \| %]

默认值50%

立方体

隐藏背面

backface-visibility

使用 backface-visibility 用于控制是否可以看到元素的背面。
- 一般设置在元素上而不是舞台元素上
- 需要舞台元素（父级元素）设置 transform-style: preserve-3d

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

翻转卡片

常见问题

如果发现元素不能点击，可能是父级设置了 transform-style: preserve-3d 属性，且同级元素设置了3D变化特性，造成对点击元素有遮挡。有以下两种方式解决

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

# 变形动画

# 基础知识

# 坐标系统

# 变形操作

# 变形叠加

# 行级元素

# 伪类状态

# :hover

# :target

# 移动元素

# 缩放元素

# 旋转操作

# 倾斜操作

# 变形基点

# 透视景深

# 观看视角

# 隐藏背面

# 常见问题