CSS 3D效果

一、动画效果

1、Transform属性

Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。
有了这个属性，接下来就是设置动画的时间和动画的表现形式啦。

2、animation动画属性

语法：

animation：（ animation-name   animation–duration    animation-timing-function  animation-delay  animation-iteration-count    animation-direction）

下面让我们来看一下，这些值分别代表什么意思：

值	说明
animation-name	由@keyframes创建的动画名称
animation–duration	动画需要多少秒完成
animation-timing-function	过渡方式（linear、ease、ease-in、ease-out、ease-in-out）
animation-delay	延迟时间
animation-iteration-count	动画的播放次数（值通常为整数，默认值为1；特殊值infinite，表示动画无限次播放）
animation-direction	动画的播放方向（normal：动画每次都是循环向前播放；alternate：动画播放为偶数次则向前播放）

---

下面用一个小练习演示一下：

小气球

代码如下：

---

 二、3D效果

要想实现3d效果，必须要在父元素上加上一个perspective属性

1、translate3d （X,Y,Z）分别表示x轴距离，y轴距离和z轴距离；但是也可以单独设置translateZ

translate

---

2、rotateX：rotateX是绕着X轴旋转，正值是向上面旋转，负值是向下面旋转

rotateY： rotateY是绕着Y轴旋转，正值是向右边旋转，负值是向左边旋转

rotateZ：tateZ是绕着Z轴旋转,正值是绕着中心点顺时针旋转，负值是绕着中心点逆时针旋转

旋转

---

3、transform-sty

如果想让子元素有3D效果，必须给父元素设置transform-style属性

设置旋转后的上下位置，给子元素设置transform-origin属性

穿透