# CSS 3D 动画

最新推荐文章于 2024-02-05 12:30:13 发布

weixin_34168880

最新推荐文章于 2024-02-05 12:30:13 发布

阅读量114

点赞数

原文链接：https://juejin.im/post/5d02a03cf265da1b7f2979ea

版权

首先介绍几个实现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);
}	
</style>
<body>
		<a href="lifang.html"; class="xiayige">下一个</a>
		<div class="box">
		<div class="box1">
		<div class="box2"></div>
		<div class="box3"></div>
	</div>
	</div>
</body>
复制代码

效果图

立方体

代码如下

<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style>
		.xiayige{
			margin-left:650px;
			text-decoration: none;
		}
		.box{
			margin:150px auto;
			width:300px;
			height:300px;
			perspective:800px;
			transform-style:preserve-3d;
		}
		.box1{
			transform-style:preserve-3d;
			width:300px;
			height:300px;
			position: relative;
			animation: lifang 8s infinite linear;
		}
		.tu{
			width:300px;
			height:300px;
			position:absolute;
			text-align:center;
			font-size:200px;
			line-height:300px;
		}
		.top{
			transform:rotateX(90deg) translateZ(150px);
			background:#f7fa59;
			background:url(3d.jpg);
			background-size:300px 300px;
		}
		.bottom{
			transform:rotateX(-90deg) translateZ(150px);
			background:#e359fa;
			background:url(3d.jpg);
			background-size:300px 300px;
		}
		.left{
			transform:rotateY(-90deg) translateZ(150px);
			background:#595ffa;
			background:url(3d.jpg);
			background-size:300px 300px;
		}
		.right{
			 transform:rotateY(90deg) translateZ(150px);
			background:#79fa59;
			background:url(3d.jpg);
			background-size:300px 300px;
		}
		.qian{
			transform:translateZ(150px);
			background:#59e7fa;
			background:url(3d.jpg);
			background-size:300px 300px;
		}
		.hou{
			transform:rotateY(-180deg) translateZ(150px);
			background:#fa5959;
			background:url(3d.jpg);
			background-size:300px 300px;
		}
		@keyframes lifang{
			0%{
				transform: rotateY(0deg);
			}
			50%{
				transform: rotateY(360deg);
			}
			60%{
				transform: rotateX(0deg);
			}
			100%{
				transform: rotateX(360deg);
			}
		}
	</style>
</head>
<body>
	<a href="xuanzhuanmuma.html"; class="xiayige">下一个</a>
	<div class="box">
		<div class="box1">
			<div class="tu top"></div>
			<div class="tu bottom"></div>
			<div class="tu left"></div>
			<div class="tu right"></div>
			<div class="tu qian"></div>
			<div class="tu hou"></div>
		</div>
	</div>
</body>
</html>
复制代码

效果图

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

旋转木马

代码如下

<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style>
		*{
			margin:0;
			padding:0;
			
		}
		.box{
			margin:200px auto;
			perspective:1000px;
		}
		.tupian{
			margin: 0 auto;
			background:url(3d.jpg);
			position: relative;
			width: 200px;
			height: 100px;
			transform: rotateX(-8deg);
			transform-style: preserve-3d;
			animation: rot linear 6s infinite;
		}
		.tupian div{
			position: absolute;
			width: 200px;
			height: 100px;
		}
		.tupian div:nth-child(1){
			background:url(3d.jpg);
			transform: rotateY(0deg) translateZ(350px);
		}
		.tupian div:nth-child(2){
			background:url(3d.jpg);
			transform: rotateY(60deg) translateZ(350px);
		}
		.tupian div:nth-child(3){
			background:url(3d.jpg);
			transform: rotateY(120deg) translateZ(350px);
		}
		.tupian div:nth-child(4){
			background:url(3d.jpg);
			transform: rotateY(180deg) translateZ(350px);
		}
		.tupian div:nth-child(5){
			background:url(3d.jpg);
			transform: rotateY(240deg) translateZ(350px);
		}
		.tupian div:nth-child(6){
			background:url(3d.jpg);
			transform: rotateY(300deg) translateZ(350px);
		}
		.tupian div:nth-child(7){
			background:url(3d.jpg);
			transform: rotateY(360deg) translateZ(350px);
		}
		@keyframes rot{
			from{transform: rotateX(-8deg) rotateY(0deg);}
			to{transform: rotateX(-8deg) rotateY(-360deg);}
		}
	</style>
</head>
<body>
	<div class="box">
		<div class="tupian">
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
			<div></div>
		</div>
	</div>
</body>
</html>
复制代码

效果图

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

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

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

weixin_34168880

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
# CSS 3D 动画

首先介绍几个实现3D效果的CSS3属性：rotateY、translateZ这两个transform属性值是实现3D效果比较常用的，首先要记清楚变换的坐标轴，X-水平、Y-竖直、Z垂直屏幕。perspective该属性为定义3D变换的元素与视图的距离，也就是透视距离。该属性不是添加在变换的元素上，而是添加到视图元素（变换元素的父元素）上。在未定义该属性的情况下，translateZ 并不...
复制链接

扫一扫