<html><head><meta charset="utf-8"><title>純CSS炫酷的3D旋轉</title> <style type="text/css">.perspective{ perspective:400px; /*perspective 屬性定義 3D 元素距視圖的距離，以像 ...
<html>
<head>
<meta charset="utf-8">
<title>純CSS炫酷的3D旋轉</title>
<style type="text/css">
.perspective{
perspective:400px;
/*perspective 屬性定義 3D 元素距視圖的距離，以像素計。該屬性允許您改變 3D 元素查看 3D 元素的視圖。
當為元素定義 perspective 屬性時，其子元素會獲得透視效果，而不是元素本身。
註釋：perspective 屬性隻影響 3D 轉換元素。*/
position:relative; /*relative 相對定位*/
top:300px; /*離頂部的距離*/
left:400px; /*離左邊的距離*/
width:300px; /*設置寬300px*/
height:300px; /*設置高300px*/
}
/*去掉自定義列表的預設樣式*/
ul{ margin:0; padding:0; list-style:none;}
/*讓所有li重疊*/
.cube li{
width:305px;
height:305px;
position:absolute;
top:0; left:0;
}
/*設置li中div的樣式，div也可以換成圖片*/
.cube div{
border:2px black solid;/*邊框紅色實線*/
height:300px;
width:300px;
}
div{width:100%;height:100%}
.cube{
width:300px;
transform:rotateY(45deg); /*沿Y軸旋轉*/
transform-style:preserve-3d; /*transform-style 屬性規定如何在 3D 空間中呈現被嵌套的元素。*/
animation:rotate 5s infinite linear;
}
/*創建自定義動畫*/
@keyframes rotate{
0%{ transform:rotateZ(0deg) rotateX(360deg) rotateY(360deg); }
100%{transform:rotateZ(0deg) rotateX(0deg) rotateY(0deg);}
}
.front{
transform:rotateY(0deg) translateZ(150px);
background:blue;
}
.back{
transform:rotateY(180deg) translateZ(150px);
background:green;
}
.left{
transform:rotateY(90deg) translateZ(150px);
background:yellow;
}
.right{
transform:rotateY(-90deg) translateZ(150px);
background:white;
}
.top{
transform:rotateX(90deg) translateZ(150px);
background:red;
}
.bottom{
transform:rotateX(-90deg) translateZ(150px);
background:orange;
}
</style>
</head>
<body>
<div class="perspective">
<ul class="cube">
<li class="front"><div></div></li>
<li class="back"><div></div></li>
<li class="left"><div></div></li>
<li class="right"><div></div></li>
<li class="top"><div></div></li>
<li class="bottom"><div></div></li>
</ul>
</div>
</body>
</html>
