浅谈css3的3D动画效果并制作一个简单的旋转照片墙
各位讀者大家好，我是一只小菜鳥。目前正在學習web前端方面的相關知識.，這也是小菜鳥第一次寫博客。寫的有哪里不對的地方歡迎各位指正。
本篇文章內容就是利用簡單的HTML布局再加上CSS3的3D轉換和動畫效果做出一個立體旋轉的照片墻。效果如下圖.
想要做成這樣的效果其實是很簡單的，在開始做之前了，我們先來了解一下它的原理吧！首先就是利用定位將圖片居中顯示，其次利用3D空間效果將圖片位移到對應的位置上再加上一點偏轉角度，然后就可以定義一個動畫，規定動畫的運轉就可以了。下面是代碼。
css代碼：
/* 去除所有標簽的內外邊距 */* {margin: 0;padding: 0; }/* 給body設置一個背景 */body {/* 引入背景圖片 */background: url(../image/7.jpg) no-repeat;/* 讓背景圖充滿這個屏幕 */background-size: 100%; }.box {/* 給父盒子設置相對定位 */position: relative;width: 400px;height: 400px;margin: 100px auto;/* 開啟3d效果， */transform-style: preserve-3d;transform: rotate(30deg);/* 調用動畫 */animation: move 8s linear infinite; }.box1 {position: relative;width: 400px;height: 400px;transform-style: preserve-3d;animation: run 8s linear infinite; }.box div {/* 給子盒子設置絕對定位，方便更改其位置 */position: absolute;width: 400px;height: 400px; }.box div img {width: 400px;height: 400px; }/* 利用3D空間轉換，將圖片定位到相應位置 */.one {transform: translateZ(400px); }.two {transform: translateZ(200px) translateX(400px) rotateY(60deg); }.three {transform: translateZ(200px) translateX(-400px) rotateY(-60deg); }.four {transform: translateZ(-200px) translateX(400px) rotateY(-60deg); }.five {transform: translateZ(-200px) translateX(-400px) rotateY(60deg); }.six {transform: translateZ(-400px); }/* 定義動畫 */@keyframes move {0% {transform: rotateX(30deg);}50% {transform: rotateX(-30deg);}100% {transform: rotateX(30deg);} }/* 定義動畫 */@keyframes run {100% {transform: rotateY(-360deg);} }.box:hover {animation-play-state: paused; }.box:hover .box1 {animation-play-state: paused; }HTML代碼
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 引入index.css樣式表 --><link rel="stylesheet" href="./css/index.css"> </head><body><div class="box"><div class="box1"><div class="one"><img src="./image/1.jpg"></div><div class="two"><img src="./image/2.jpg"></div><div class="three"><img src="./image/3.jpg"></div><div class="four"><img src="./image/4.jpg"></div><div class="five"><img src="./image/5.jpg"></div><div class="six"><img src="./image/6.jpg"></div></div></div> </body></html>以上就是全部代碼，圖片之類的小伙伴們可以在網上找幾張自己喜歡的。其實這種效果是比較簡單的一種，只需要簡單的將圖片移到對應位置，在為其添加一點動畫就能做到。這里運用的就是CSS3的transform和animation兩個屬性值。我在這里為大家簡單的介紹一下這兩個屬性吧。
transform3d轉換屬性介紹：
3d轉換（空間轉換）就是使用transform屬性實現元素在空間內的位移、旋轉、縮放等效果。
一.3D坐標系：
3D 坐標系比2D 多了一個Z軸。 這是從坐標軸角度定義的。 x 、y 和z三條坐標軸構成了一個立體空間，z軸位置與視線方向相同
3D坐標系一定要記住3個坐標軸取值的正反：
-
X 軸 往右越大，是正值， 否則反之
-
Y 軸 往下越大，是正值，否則反之
-
Z軸 （指向我們）越大，是正值，否則反之
二、屬性：transform
(1).3D位移：?transform: translate3d(x, y, z);這是完整寫法，當然了我們一般不采用完整寫法，更多的情況我們采用分開的寫法。
????????transform: translateX(100px);
????????transform: translateY(100px);
? ? ? ? transform: translateZ(100px);
(2)、透視。
?a、作用：空間轉換時，為元素添加近大遠小、近實遠虛的視覺效果。當我們為元素添加Z軸方向的位移時為了更好的去觀察元素的變化，會為其添加透視效果
b、語法：?perspective: 800px;
? 注意點：
i、取值范圍經常在 800px ~ 1200px 之間。
ii、一定給父親添加
iii、透視距離也稱為視距，所謂的視距就是人的眼睛到屏幕的距離。
???????其中 d 為透視的距離
????????z 是 translateZ 的距離， 這個距離靠近我們，盒子越大
透視視距圖?(3)、3D旋轉
a、rotateX（類似體操單杠）
?效果展示:
(b)、rotateY（類似鋼管舞）
效果展示
?
?注意點：1、默認的旋轉中心在盒子的中心位置。
? ? ? ? ? ? ? ? 2、取值正負值都可以單位為deg 如transfrm：rotateY（90deg）；取值正負不同旋轉方向不同。我們一般用左手來判斷其旋轉方向
左手法則?
規則：
大拇指指向X軸正向方（右）， 則四指指向的方向是旋轉的方向
大拇指指向Y軸正向方（下）， 則四指指向的方向是旋轉的方向
要想體現3D效果，我們則要給父盒子開啟3D效果：transform-style: preserve-3d;
?animation動畫屬性介紹：
一、特點：可以不用鼠標觸發，自動的，反復的執行某些動畫。
二、使用：
? ? ? ? 1.定義：
@keyframes dance {from {transform: scale(1)}to {transform: scale(1.5)} }或者
/* 1. 定義的動畫 */ /* @keyframes為關鍵字 dance是動畫名稱（可以按照自己喜好隨意取名）*/@keyframes dance {0% {transform: scale(1)} 100% {transform: scale(1.5)}}2、調用
img {width: 200px;/* 2. 使用動畫 animation: 動畫名稱 執行時間; infinite 循環*/animation: dance .5s infinite; }三、屬性：
1、書寫順序：
?
動畫名字參照css類選擇器命名
動畫時長和延遲時間別忘了帶單位 s
infinite 無限循環動畫（重復次數）
alternate 為反向 就是左右來回執行動畫（跑馬燈）
forwards 動畫結束停留在最后一幀狀態， 不循環狀態使用
linear 讓動畫勻速執行
steps幀動畫
2.幀動畫演示
?代碼快
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}.box {width: 140px;height: 140px;margin: 100px auto;background: url(../老師的資料/images/bg.png);animation: run 1.5s steps(12) infinite, move 4s forwards;}@keyframes run {100% {background-position: -1680px;}}</style> </head><body><div class="box"></div> </body></html>?
?這個是引用的背景圖片，有興趣的小伙伴可以嘗試一下。
3、動畫連寫
在寫代碼時，有時候一個元素肯定運用的不止一個動畫，如果在重新調用，后調用的動畫肯定會覆蓋前面調用的動畫，所以這個時候動畫連寫的作用就體現出來了，這個是書寫格式。
/* 我們想要2個動畫一起執行 animation: 動畫1, 動畫2, ... 動畫n */ animation: run 1s steps(12) infinite, move 5s linear forwards;4.動畫暫停
.box:hover ul { /*動畫暫停屬性*/animation-play-state: paused; }以上就是我的分享，希望對大家有那么一點點的幫助。
總結
以上是生活随笔為你收集整理的浅谈css3的3D动画效果并制作一个简单的旋转照片墙的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： cad卸载不干净_流氓软件卸不干净？这7
- 下一篇： 博客园9月份第3周51Aspx源码发布详