一文搞懂CSS 3D动画效果(1)

1.转换类型： transform-style: preserve-3d;

---

这个属性的作用是告诉浏览器，以3D的形式对图片进行旋转。

这个属性一般是加在需要进行变换的盒子上

以下通过翻转纽扣进行体会：

代码如下：

Hello

World

2.透视 perspective: 400px;（拉进我们眼睛与图像的距离）

---

这里指物理距离不变,改变的是展示的效果（就像在平时观察真实的物

体走近了几步,观察的角度改变了）

这个属性一般加在需要变换盒子的父盒子上。

以下使用翻转飞人案例进行代码展示

修改透视距离为100px会看到飞人踢你。（嘿嘿）

代码如下：

三、项目案例代码

==========================================================================

1.立体导航栏

---

这个的实现过程就是将盒子通过x轴进行旋转,直到与电脑屏幕垂直,然后添加一个新的

盒子,与第一个盒子垂直,在鼠标聚焦在第二个盒子上的时候盒子进行90度旋转

哔哩哔哩

百度知道

哔哩哔哩

百度知道

哔哩哔哩

百度知道

哔哩哔哩

百度知道

哔哩哔哩

百度知道

哔哩哔哩

百度知道

2.旋转木马

---

添加了6个盒子,中间一个,将每一个图片按照第一个图片先旋转,再平移

【例如translateZ(350px),沿z轴平移350px】,可以在纸上先画一个俯视图,

看看每一个图片具体旋转多少度,移动多少可以达到固定的位置。