效果
效果圖如下
實現思路
- 定義一個最外層的容器,用來控制顯示的位置
- 定義一個父容器,用來設置元素被查看位置的視圖,這裏使用到CSS3的perspective 屬性
- 定義子容器,設置爲相對定位,利用transform-style屬性,使被轉換的子元素保留其 3D 轉換
- 定義6個div,構成正方體的6個面
dom結構
按照實現思路,我們需要如下的dom結構
<div class="container">
<div class="cube-wrap">
<div class="cube">
<div class="front">front</div>
<div class="back">back</div>
<div class="top">top</div>
<div class="bottom">bottom</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</div>
</div>
css樣式
1、最外層容器樣式
.container{
width: 250px;
height: 250px;
margin: 250px auto;
}
2、父容器設置perspective 屬性
.cube-wrap{
perspective: 800px;
perspective-origin: 50% 100px;
}
3、子容器設置transform-style屬性,同時子容器有控制着正方體旋轉的動畫
.cube{
position: relative;
width: 200px;
margin: 0 auto;
transform-style: preserve-3d;
animation: cube-spin 5s infinite linear;
}
@keyframes cube-spin{
from{
transform: rotateY(0);
}
to{
transform: rotateY(360deg);
}
}
4、正方體6個面的樣式
.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);
text-transform: uppercase;
}
5、將6個面分別進行位置的變換轉移,構成一個正方體
.front{
transform: translateZ(100px);
}
.back{
transform: rotateY(180deg) translateZ(100px);
}
.top{
transform: rotateX(-90deg) translateY(-100px);
transform-origin: top center;
}
.bottom{
transform: rotateX(90deg) translateY(100px);
transform-origin: bottom center;
}
.left{
transform: rotateY(270deg) translateX(-100px);
transform-origin: center left;
}
.right{
transform: rotateY(-270deg) translateX(100px);
transform-origin: top right;
}
搞定,邏輯很清晰有沒有,跟着實現一遍,你也可以畫出超酷炫的透明正方體咯~