CSS 2D转换 3D动画 3D转换

目录

2D转换(transform):

移动translate:

旋转rotate:

缩放scale：

CSS3动画（transform）：

动画常用的属性：

将长图片利用盒子实现动画的效果：

3D转换：

透视perspective：

旋转rotate3d：

3D呈现transform-style：

---

2D转换(transform):

---

2d转换的综合写法：

注意：先旋转和位移，有影响最终位置效果。

---

移动translate:

translform:translatex(100px):仅仅是在x轴上移动

translform:translatey(100px):仅仅是在y轴上移动

如果使用的参数是百分比，则移动的距离参数是按照盒子自身来移动的。

让盒子实现水平居中：以前是定位：然后用子绝父相，left:50%(是父类的一半使其中心轴和父类一条线) margin-left：子类的一半。

left可以对应为right。

left top等之后在posiion：定位下才会变为移动的。

旋转rotate:

默认得旋转中心是元素得中心。

实现：点击后三角的变化。

正方形，本身进行旋转45，在鼠标悬停时，过度一个悬停旋转度数。

使用transform-origin:属性来实现改变旋转的中心点

缩放scale：

这里的是倍数。

这里区别于直接设置宽和高：直接设置时，他是依照上边框为基线，向左右，下进行放大缩小的。 会影响其他盒子的布局

scle：的优点在于，它不会影响其他盒子的布局。 而且可以设置缩放的中心点。默认是元素的中心

同样使用transform-origin:属性来设置缩放的中心点。、

---

CSS3动画（transform）：

一个元素可以添加多个动画，只要用逗号分隔即可。

---

动画序列： 用来实现多段的动画变换。

实质是在0到100过程中实现不同百分比时，实现不同的进程

但要注意transform怎么进行的。

这个比分比是总时间的百分比。

动画常用的属性：

animation-play-state:是指当鼠标在动画上是是否暂停。 但注意在简写形式中需要写在悬停中。

速度曲线：

这里steps值实现了动画分几步完成，就不需要在动画定义中写多个百分比了只写0 100即可

---

动画简写：

---

通过动画可以实现类似热点图的效果：

思路：通过圆，将其逐渐变大。 一般会将圆放在盒子中。 但注意有多个波纹，要多个小盒子间隔变化。 注意动画顺序时间的设置。

---

将长图片利用盒子实现动画的效果：

3D转换：

---

xyz不能省略，没有就写0；

透视perspective：

想要3d效果必须要有透视。

旋转rotate3d：

deg和度数单位等价，只是在这里只能写deg。

3D呈现transform-style：

---

但要注意实现这种盒子时，注意由于盒子旋转中心的因素导致图像效果。

如这个本来是竖直，变换到底部的。这时默认旋转是竖直的中心，此时应将下面的盒子移动到前面。

---