css3 3D旋轉特效

時間 2019-12-04

標籤 css3 css 3d 旋轉特效欄目 CSS 简体版

原文原文鏈接

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

3D旋轉，難點在與其處在一個三維的空間中，咱們須要發揮一下空間想象力在頭腦中構建它的結構，同時，它的座標系是隨着所作的3D變化而改變的，因此在進行變換的過程當中，不一樣變換動做的順序亦是相當重要。html

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

繞Y軸旋轉180度：css3

<!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度後你所看到的就像一張畫貼在玻璃上，你從背面看而已。這種比較簡單，可是在網頁中並不經常使用，最多的仍是上面代碼中所寫的這種效果。chrome

一、咱們要有兩個面。設置backface-visibility爲hidden，隱藏兩個面的背面，將須要顯示在背面的那個面back繞Y軸旋轉180度。瀏覽器

二、將兩個面裝在一個盒子a裏面而且設置盒子transform-style: preserve-3d，咱們要操做的是這個盒子。測試

三、給盒子a設置鼠標移入旋轉180度，完成！ 網站

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

相比來講，旋轉90度要作的處理多了幾步。3d

<!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瀏覽器，因此省略了其中的兼容性語句，在實際的使用過程當中，必定要加上兼容性語句。

相關標籤/搜索

每日一句

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