css3 3D旋轉特效

阿新 • • 發佈：2019-01-18

最近自己的網站正在製作，由於是個人網站，所以我傲嬌的拋棄了IE，痛快的用起了css3和html5的諸多特效，然而問題亦隨之而來。這篇文章的主要講解在使用css3的3D旋轉的時候遇到的文章，錯誤之處，還望各位看官老爺評論中指出。

3D旋轉，難點在與其處在一個三維的空間中，我們需要發揮一下空間想象力在頭腦中構建它的結構，同時，它的座標系是隨著所做的3D變化而改變的，所以在進行變換的過程中，不同變換動作的順序亦是至關重要。

網頁中常見的3D旋轉特效有兩種：繞Y軸旋轉和繞X軸旋轉。

繞Y軸旋轉180度：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>繞Y軸旋轉</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#box{
				margin: 50px auto;
			}
			#box,.container,.front,.back{
				width: 200px;
				height: 200px;	
			}
			.container{
				position: relative;
				transform-style: preserve-3d;
				transition: all 1s linear;
			}
			.container:hover{
				transform: rotateY(180deg);
			}
			.front,.back{
				position: absolute;
				top: 0;
				left: 0;
				backface-visibility: hidden;
				color: #fff;
				font-size: 40px;
				text-align: center;
				line-height: 200px;
			}
			.front{
				background: red;
			}
			.back{
				background: green;
				transform: rotateY(180deg);
			}
			
			
		</style>
	</head>
	<body>
		<div id="box">
			<div class="container">
				<div class="front">front</div>
				<div class="back">back</div>
			</div>
		</div>
	</body>
</html>

程式碼沒有註釋，因為都是一些屬性，不懂的屬性可以直接百度，這裡主要講解其核心思想。

繞Y軸旋轉，就是將正面的轉到後面，而後面的顯示在正面。如果直接旋轉，不設定背面的元素的話，那麼旋轉180度後你所看到的就像一張畫貼在玻璃上，你從背面看而已。這種比較簡單，但是在網頁中並不常用，最多的還是上面程式碼中所寫的這種效果。

1、我們要有兩個面。設定backface-visibility為hidden，隱藏兩個面的背面，將需要顯示在背面的那個面back繞Y軸旋轉180度。

2、將兩個面裝在一個盒子a裡面並且設定盒子transform-style: preserve-3d，我們要操作的是這個盒子。

3、給盒子a設定滑鼠移入旋轉180度，完成！

繞X軸旋轉和繞Y軸旋轉的本質是相同的，所以繞X軸旋轉直接講解旋轉90度，這個原理也可以反過來套用在Y軸的旋轉上。

相比來說，旋轉90度要做的處理多了幾步。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>繞X軸旋轉</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#box{
				margin: 50px auto;
				border: 1px solid blue;
			}
			#box,.container,.front,.back{
				width: 200px;
				height: 200px;	
			}
			.container{
				position: relative;
				transform-style: preserve-3d;
				transition: all 1s linear;
			}
			.container:hover{
				transform: rotateX(90.1deg);
			}
			.front,.back{
				position: absolute;
				top: 0;
				left: 0;
				backface-visibility: hidden;
				color: #fff;
				font-size: 40px;
				text-align: center;
				line-height: 200px;
			}
			.front{
				transform: translateZ(100px);
				background: red;
			}
			.back{
				background: green;
				transform: rotateX(-90deg) translateZ(100px);
			}
			
			
		</style>
	</head>
	<body>
		<div id="box">
			<div class="container">
				<div class="front"></div>
				<div class="back"></div>
			</div>
		</div>
	</body>
</html>

看程式碼不難發現，其實旋轉多少度的本質都是一樣的，但是旋轉90度相對來說在開始旋轉的處理要進行在Y軸方向的移動。因為如果不進行Y軸方向的移動，旋轉90度後兩個面成T字形，而我們需要他們成L字形。

同時，再次強調，某個面旋轉的同時它的座標系也會發生變化，所以一定要注意動作的先後順序。這個可以自己畫一個三維座標系來幫助理解。

最後一點，在進行大盒子的旋轉時，大家可能會看到我的程式碼中：

.container:hover{
				transform: rotateX(90.1deg);
			}

寫90deg在firefox是正常的，但是在chrome中你的滑鼠放在盒子上會出現閃動的情況，但是你寫大於90就可以解決，具體原因暫時不詳。

在測試的過程中我使用了最新的chrome瀏覽器，所以省略了其中的相容性語句，在實際的使用過程中，一定要加上相容性語句。

css3 3D旋轉特效

css3 3D旋轉特效

CSS3 3D旋轉立方

HTML5、CSS3實現旋轉特效

基於css3的3D立方體旋轉特效（先translate與先rotate的不同）

使用純CSS3實現一個3D旋轉的書本

jquery環形3D立體旋轉特效

實現CSS3 3D圍繞旋轉

低調奢華 CSS3 transform-style 3D旋轉

css3 js實現3D旋轉效果

CSS3實現3D旋轉選單導航

CSS3中的3D旋轉 rotate、3D位移 translate

HTML5 CSS3 專題：誘人的例項 3D旋轉木馬效果相簿

html5 canvas文字標籤雲3D旋轉動畫特效

【CSS3進階】酷炫的3D旋轉透視

css3實現的發光屏幕旋轉特效

CSS3(3D骰子)

手把手教你玩轉 CSS3 3D 技術（轉載）

CSS3 3D transform變換

CSS3 3D環境實現立體魔方效果代碼

CSS3:3D環繞實現

css3 3D旋轉特效

相關推薦