# CSS 3D 動畫

時間 2019-11-06

標籤 css 3d 動畫欄目 CSS 简体版

原文原文鏈接

首先介紹幾個實現3D效果的CSS3屬性：css

rotateY、translateZhtml

這兩個transform屬性值是實現3D效果比較經常使用的，首先要記清楚變換的座標軸，X-水平、Y-豎直、Z垂直屏幕。url

perspectivespa

該屬性爲定義3D變換的元素與視圖的距離，也就是透視距離。該屬性不是添加在變換的元素上，而是添加到視圖元素（變換元素的父元素）上。3d

在未定義該屬性的狀況下，translateZ 並不會生效，由於沒有透視距離。若你的元素沿Z軸的移動值並非基於百分比的狀況下，只需保證 prespective 值大於 translateZ 值便可。code

反轉orm

代碼以下cdn

.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>
複製代碼

效果圖htm

立方體blog

代碼以下

<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 的一些理解若有不足之處請你們評論留言多多指教。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。