利用CSS實(shí)現(xiàn)立方體360度旋轉(zhuǎn)效果實(shí)例代碼
發(fā)布時(shí)間：2016-10-18 16:08:08 作者：佚名 
我要評論
我要評論這篇文章通過實(shí)例代碼給大家介紹了利用CSS實(shí)現(xiàn)立方體360度旋轉(zhuǎn)效果的方法，實(shí)現(xiàn)后的效果非常炫酷，而且實(shí)現(xiàn)的代碼非常簡單，對大家的理解和學(xué)習(xí)很有幫助，有需要的朋友們下面來一起看看吧。
靜態(tài)效果圖如下：
示例代碼：
復(fù)制代碼
代碼如下:<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* { margin: 0; padding: 0}
ul {list-style: none;}
ul {
width: 200px;
height: 200px;
margin: 200px auto;
position: relative;
transition: all 6s;
/*6秒時(shí)間轉(zhuǎn)變*/
transform-style: preserve-3d;
/*放在父盒子內(nèi)*/
}
ul li {
width: 100%;
height: 100%;
position: absolute;
text-align: center;
line-height: 200px;
font-size: 40px;
color: #fff;
}
li:nth-child(1){
transform: rotateX(0deg) translateZ(100px);
/*translateZ是為了讓立方體出現(xiàn)形狀*/
background-color: rgba(255, 0, 0, 0.6);
}
li:nth-child(2){
transform: rotateX(-90deg) translateZ(100px);
background-color: rgba( 0, 255,0, 0.6);
}
li:nth-child(3){
transform: rotateX(-180deg) translateZ(100px);
background-color: rgba(0,0,255,0.5);
}
li:nth-child(4){
transform: rotateX(-270deg) translateZ(100px);
background-color: rgba(50,50,25,0.5);
}
li:nth-child(5){
transform: rotateY(-90deg) translateZ(100px);
background-color: rgba(255,0,255,0.5);
}
li:nth-child(6){
transform: rotateY(90deg) translateZ(100px);
background-color: rgba(0,255,255,0.5);
}
ul:hover{
transform :rotateX(360deg) rotateY(360deg);
}
</style>
</head>
<body>
<ul>
<li>第1個(gè)盒子</li>
<li>第2個(gè)盒子</li>
<li>第3個(gè)盒子</li>
<li>第4個(gè)盒子</li>
<li>第5個(gè)盒子</li>
<li>第6個(gè)盒子</li>
</ul>
</body>
</html>
總結(jié)
以上就是利用CSS實(shí)現(xiàn)立方體效果的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流。
相關(guān)文章
JS+CSS3實(shí)現(xiàn)鼠標(biāo)可拖動的交互式立方體旋轉(zhuǎn)特效源碼
是一段實(shí)現(xiàn)了立方體圖塊可根據(jù)鼠標(biāo)的拖動方向進(jìn)行旋轉(zhuǎn)的交互式效果代碼，純原生支持鼠標(biāo)拖動展示，本段代碼適應(yīng)于所有網(wǎng)頁使用，有興趣的朋友們可以前來下載使用2016-08-18
純css3實(shí)現(xiàn)的3D圖片立方體旋轉(zhuǎn)動畫特效源碼
這是一款使用純css3實(shí)現(xiàn)的3D圖片立方體旋轉(zhuǎn)動畫特效源碼。外層圖片構(gòu)成大立方體包裹內(nèi)層的小圖片立方體同步旋轉(zhuǎn)，鼠標(biāo)滑過立方體可呈現(xiàn)出外層立方體炸開的效果。該動畫特效2016-07-21css3 transform及原生js實(shí)現(xiàn)鼠標(biāo)拖動3D立方體旋轉(zhuǎn)
這篇文章主要為大家詳細(xì)介紹了css3 transform及原生js實(shí)現(xiàn)鼠標(biāo)拖動3D立方體旋轉(zhuǎn)的相關(guān)資料，感興趣的小伙伴們可以參考一下2016-06-20一款利用html5和css3實(shí)現(xiàn)的3D立方體旋轉(zhuǎn)效果教程
這篇文章主要為大家分享了一款利用html5和css3實(shí)現(xiàn)的3D立方體旋轉(zhuǎn)效果教程，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-04-26
CSS實(shí)現(xiàn)360度超炫3D旋轉(zhuǎn)立方體動畫特效源碼
本源碼是一款CSS來制作的可互動的360度超炫3D旋轉(zhuǎn)立方體動畫特效的代碼。用戶可以使用鼠標(biāo)拖動立方體來查看各個(gè)面2016-03-04基于CSS3實(shí)現(xiàn)立方體自轉(zhuǎn)效果
這篇文章主要介紹了基于CSS3實(shí)現(xiàn)立方體自轉(zhuǎn)效果 的相關(guān)資料,需要的朋友可以參考下2016-03-01
純CSS3實(shí)現(xiàn)的3D立方體旋轉(zhuǎn)動畫特效源碼
CSS3實(shí)現(xiàn)3D立方體旋轉(zhuǎn)動畫特效是一款純CSS3制作的3d旋轉(zhuǎn)動畫效果2015-01-09
HTML5/CSS3實(shí)現(xiàn)的立方體翻轉(zhuǎn)3D全屏焦點(diǎn)圖特效源碼
這是一款非常大氣華麗的HTML5/CSS3 3D實(shí)現(xiàn)的全屏3D焦點(diǎn)圖特效插件，在頁面的兩側(cè)，有兩個(gè)帶有立體浮動效果的左右箭頭進(jìn)行圖片的切換。其焦點(diǎn)圖的圖片切換方式是3D效果的，2014-07-10
采用CSS3實(shí)現(xiàn)的表面顏色可漸變3D立方體動畫特效源碼
這是一款視覺效果超炫的采用CSS3實(shí)現(xiàn)的3D立方體動畫，與以往的立方體動畫效果不同的是，這款CSS3立方體動畫的幾個(gè)表面的背景顏色都有漸變的動畫效果，并且會伴隨著立方體的2014-06-17
一款HTML5動畫，立方體會在不同的角度進(jìn)行扭曲、放大和縮小2014-06-06
