# CSS 3D 动画

首先介绍几个实现3D效果的CSS3属性：

rotateY、translateZ

这两个transform属性值是实现3D效果比较常用的，首先要记清楚变换的坐标轴，X-水平、Y-竖直、Z垂直屏幕。

perspective

该属性为定义3D变换的元素与视图的距离，也就是透视距离。该属性不是添加在变换的元素上，而是添加到视图元素（变换元素的父元素）上。

在未定义该属性的情况下，translateZ 并不会生效，因为没有透视距离。若你的元素沿Z轴的移动值并不是基于百分比的情况下，只需保证 prespective 值大于 translateZ 值即可。

反转

代码如下

.xiayige{
	margin-left:650px;
	text-decoration: none;
}
.box{
width: 300px;
height: 300px;
margin:200px auto;
perspective:800px;
}

.box1{
width:300px;
height:300px;
position:relative;
transform-style:preserve-3d;
transition:transform 1s;
}

.box2{
backface-visibility:hidden;
width:300px;
height:300px;
position:absolute;
background:url(3d.jpg);
background-size:650px 300px;February
transform:rotateY(180deg);
}
.box3{
backface-visibility:hidden;
width:300px;
height:300px;
position:absolute;
background:url(tuan.png);
background-size:650px 300px;
transform:rotateY(180deg);
}
.box1:hover{
transform:rotateY(180deg);
}	


		下一个
		

		

		

		

	
	

复制代码

效果图

立方体

代码如下

	
	
	


	下一个
	

		

			

			

			

			

			

			

		
	


复制代码

效果图

由于文件太大没法上传图片在此忽略。

旋转木马

代码如下

	
	
	


	

		

			

			

			

			

			

			

			

		
	


复制代码

效果图

由于文件太大没法上传图片在此忽略。

以上就是我个人对于 css 3d 的一些理解 如有不足之处 请大家评论留言多多指教。

转载于:https://juejin.im/post/5d02a03cf265da1b7f2979ea