css3實現(xiàn)3d旋轉(zhuǎn)動畫特效
發(fā)布時間：2015-03-10 10:13:29 作者：佚名 
我要評論
我要評論這篇文章主要介紹了css3實現(xiàn)3d旋轉(zhuǎn)動畫特效，使用CSS3實現(xiàn)了3d立方體的左旋轉(zhuǎn)，右旋轉(zhuǎn)，上下旋轉(zhuǎn)等效果，十分實用，有需要的小伙伴來參考下吧
復(fù)制代碼
代碼如下:<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>css3 3d動畫 keyframes</title>
</head>
<body>
<style>/*************** ANIMATIONS ***************/
@-webkit-keyframes spin {
from { -webkit-transform: rotateY(0); }
to { -webkit-transform: rotateY(360deg); }
}
@-ms-keyframes spin {
from { ms-transform: rotateY(0); }
to { ms-transform: rotateY(360deg); }
}
@keyframes spin {
from { transform: rotateY(0); }
to { transform: rotateY(360deg); }
}
@-webkit-keyframes spin-vertical {
from { -webkit-transform: rotateX(0); }
to { -webkit-transform: rotateX(-360deg); }
}
@-ms-keyframes spin-vertical {
from { ms-transform: rotateX(0); }
to { ms-transform: rotateX(-360deg); }
}
@keyframes spin-vertical {
from { transform: rotateX(0); }
to { transform: rotateX(-360deg); }
}
/*************** STANDARD CUBE ***************/
.cube-wrap {
-webkit-perspective: 800px;
-webkit-perspective-origin: 50% 100px;
-moz-perspective: 800px;
-moz-perspective-origin: 50% 100px;
-ms-perspective: 800px;
-ms-perspective-origin: 50% 100px;
perspective: 800px;
perspective-origin: 50% 100px;
}
.cube {
position: relative;
width: 200px;
margin: 0 auto;
-webkit-transform-style: preserve-3d;
-webkit-animation: spin 5s infinite linear;
-moz-transform-style: preserve-3d;
-moz-animation: spin 5s infinite linear;
-ms-transform-style: preserve-3d;
-ms-animation: spin 5s infinite linear;
transform-style: preserve-3d;
animation: spin 5s infinite linear;
}
.cube div {
position: absolute;
width: 200px;
height: 200px;
background: rgba(255,255,255,0.1);
box-shadow: inset 0 0 30px rgba(125,125,125,0.8);
font-size: 20px;
text-align: center;
line-height: 200px;
color: rgba(0,0,0,0.5);
font-family: sans-serif;
text-transform: uppercase;
}
/*************** DEPTH CUBE ***************/
.depth div.back-pane {
-webkit-transform: translateZ(-100px) rotateY(180deg);
-moz-transform: translateZ(-100px) rotateY(180deg);
-ms-transform: translateZ(-100px) rotateY(180deg);
transform: translateZ(-100px) rotateY(180deg);
}
.depth div.right-pane {
-webkit-transform:rotateY(-270deg) translateX(100px);
-webkit-transform-origin: top right;
-moz-transform:rotateY(-270deg) translateX(100px);
-moz-transform-origin: top right;
-ms-transform:rotateY(-270deg) translateX(100px);
-ms-transform-origin: top right;
transform:rotateY(-270deg) translateX(100px);
transform-origin: top right;
}
.depth div.left-pane {
-webkit-transform:rotateY(270deg) translateX(-100px);
-webkit-transform-origin: center left;
-moz-transform:rotateY(270deg) translateX(-100px);
-moz-transform-origin: center left;
-ms-transform:rotateY(270deg) translateX(-100px);
-ms-transform-origin: center left;
transform:rotateY(270deg) translateX(-100px);
transform-origin: center left;
}
.depth div.top-pane {
-webkit-transform:rotateX(-90deg) translateY(-100px);
-webkit-transform-origin: top center;
-moz-transform:rotateX(-90deg) translateY(-100px);
-moz-transform-origin: top center;
-ms-transform:rotateX(-90deg) translateY(-100px);
-ms-transform-origin: top center;
transform:rotateX(-90deg) translateY(-100px);
transform-origin: top center;
}
.depth div.bottom-pane {
-webkit-transform:rotateX(90deg) translateY(100px);
-webkit-transform-origin: bottom center;
-moz-transform:rotateX(90deg) translateY(100px);
-moz-transform-origin: bottom center;
-ms-transform:rotateX(90deg) translateY(100px);
-ms-transform-origin: bottom center;
transform:rotateX(90deg) translateY(100px);
transform-origin: bottom center;
}
.depth div.front-pane {
-webkit-transform: translateZ(100px);
-moz-transform: translateZ(100px);
-ms-transform: translateZ(100px);
transform: translateZ(100px);
}
/*************** VERTICAL SPINNING CUBE ***************/
.cube-wrap.vertical .cube {
-webkit-transform-origin: 0 100px;
-moz-transform-origin: 0 100px;
-ms-transform-origin: 0 100px;
transform-origin: 0 100px;
-webkit-animation: spin-vertical 5s infinite linear;
-moz-animation: spin-vertical 5s infinite linear;
-ms-animation: spin-vertical 5s infinite linear;
animation: spin-vertical 5s infinite linear;
}
.cube-wrap.vertical .depth div.top-pane {
-webkit-transform:rotateX(-270deg) translateY(-100px);
-moz-transform:rotateX(-270deg) translateY(-100px);
-ms-transform:rotateX(-270deg) translateY(-100px);
transform:rotateX(-270deg) translateY(-100px);
}
.cube-wrap.vertical .depth div.back-pane {
-webkit-transform: translateZ(-100px) rotateX(180deg);
-moz-transform: translateZ(-100px) rotateX(180deg);
-ms-transform: translateZ(-100px) rotateX(180deg);
transform: translateZ(-100px) rotateX(180deg);
}
.cube-wrap.vertical .depth div.bottom-pane {
-webkit-transform: rotateX(-90deg) translateY(100px);
-moz-transform: rotateX(-90deg) translateY(100px);
-ms-transform: rotateX(-90deg) translateY(100px);
transform: rotateX(-90deg) translateY(100px);
}
/*************** FLAT SPINNING CUBE ***************/
.cube-wrap.flat {
-webkit-perspective: none;
-webkit-perspective-origin: 0 0;
-moz-perspective: none;
-moz-perspective-origin: 0 0;
-ms-perspective: none;
-ms-perspective-origin: 0 0;
perspective: none;
perspective-origin: 0 0;
}</style>
<div style="height: 300px; margin-top: 45px; float:left; width:400px;">
<div class="cube-wrap">
<div class="cube depth">
<div class="front-pane">前</div>
<div class="back-pane">后</div>
<div class="top-pane">上</div>
<div class="bottom-pane">bottom</div>
<div class="left-pane">左</div>
<div class="right-pane">右</div>
</div>
</div>
</div>
<div style="height: 300px; margin-top: 60px;float:left;width:400px;">
<div class="cube-wrap vertical">
<div class="cube depth">
<div class="front-pane">前</div>
<div class="back-pane">后</div>
<div class="top-pane">上</div>
<div class="bottom-pane">bottom</div>
<div class="left-pane">左</div>
<div class="right-pane">右</div>
</div>
</div>
</div>
<div style="height: 300px; margin-top: 60px;float:left;width:400px;">
<div class="cube-wrap flat">
<div class="cube depth">
<div class="front-pane">前</div>
<div class="back-pane">后</div>
<div class="top-pane">上</div>
<div class="bottom-pane">bottom</div>
<div class="left-pane">左</div>
<div class="right-pane">右</div>
</div>
</div>
</div>
</body>
</html>
本CSS3特效主要使用的是Transform屬性實現(xiàn)，它是“變型”的意思，值主要包括：旋轉(zhuǎn)rotate，扭曲skew，縮放scale，移動translate以及矩陣變形matrix 。通過這個實例，你將會學(xué)會如何使用它實現(xiàn)css3 3D動畫。希望大家能夠喜歡。
相關(guān)文章
純CSS3實現(xiàn)的3D立方體旋轉(zhuǎn)動畫特效源碼
CSS3實現(xiàn)3D立方體旋轉(zhuǎn)動畫特效是一款純CSS3制作的3d旋轉(zhuǎn)動畫效果2015-01-09
純CSS3實現(xiàn)的3D旋轉(zhuǎn)下拉菜單效果源碼
這是一款帶有3D動畫特效的CSS3菜單，該菜單有以下幾個特點：首先是菜單時基于CSS3的，因此瀏覽器兼容性都還可以2015-01-05
HTML5+CSS3實現(xiàn)3D旋轉(zhuǎn)陀螺動畫特效源碼
這次我要向大家分享一款很有創(chuàng)意的HTML5/CSS3動畫特效，它是一個可以旋轉(zhuǎn)的3D陀螺動畫。這個動畫和之前分享的HTML5動畫類似，主要也是利用了CSS3的transform屬性，讓物體旋2014-11-22
HTML5/CSS3實現(xiàn)的3D環(huán)形旋轉(zhuǎn)圖片墻動畫特效源碼
今天我們要分享一款基于HTML5/CSS3的3D環(huán)形圖片墻，該HTML5圖片特效是一面3D立體的墻，墻上貼著一些圖片，墻體在不停的旋轉(zhuǎn)移動。并且在屏幕上四處走動，當(dāng)鼠標(biāo)滑過圖片時2014-11-04
CSS3實現(xiàn)的一款迷人3D木塊旋轉(zhuǎn)動畫
一款迷人的HTML5+CSS3實現(xiàn)的3D旋轉(zhuǎn)動畫，這款3D動畫的主角是一根根小木條2014-05-06
jquery+css3實現(xiàn)圖像三維旋轉(zhuǎn)效果類似風(fēng)扇轉(zhuǎn)動的3D效果
今天給大家推薦一種切換效果類似風(fēng)扇轉(zhuǎn)動一樣的3D效果，點擊底部阿拉伯?dāng)?shù)字的時候，圖片會做響應(yīng)的反轉(zhuǎn)特效，隨機反轉(zhuǎn)震動效果2013-03-14
css3 transform 3d 使用html5+css3創(chuàng)建動態(tài)旋轉(zhuǎn)的3d立方體
今天向大家介紹如何使用css3創(chuàng)建3d的立方體,操作方法為：上下左右鍵，實現(xiàn)立方體的翻轉(zhuǎn)旋轉(zhuǎn)效果2013-01-06- 有一些前沿的電商網(wǎng)站已經(jīng)開始使用3D模型來展示商品并支持在線定制，而其中圖書的展示是最為簡單的一種，無需復(fù)雜的建模過程，使用圖片和CSS3的一些變換即可實現(xiàn)更好的展示2016-03-21
