正方體1— 這個實現過程中，先平移後旋轉，座標軸不變
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<style>
*{
margin: 0;
padding: 0;
}
ul{
width: 200px;
height: 200px;
border: 1px solid #000;
box-sizing: border-box;
margin: 100px auto;
position: relative;
transform: rotateY(0deg) rotateX(0deg);//給ul增加一個3d效果，下面的效果圖都是改變這兩個參數值手動f12旋轉得到
transform-style: preserve-3d;
}
ul li{
list-style: none;
width: 200px;
height: 200px;
font-size: 60px;
text-align: center;
line-height: 200px;
position: absolute;//所有的li重疊在ul中
left: 0;
top: 0;
}
ul li:nth-child(1){
background-color: red;
transform: translateX(-100px) rotateY(90deg);//因爲要繞正方體中心軸旋轉，所以先沿x軸向左移動邊長的一半，之後繞y軸轉90度，形成左面
}
ul li:nth-child(2){
background-color: green;
transform: translateX(100px) rotateY(90deg);//形成右面
}
ul li:nth-child(3){
background-color: blue;
transform: translateY(-100px) rotateX(90deg);//形成上面
}
ul li:nth-child(4){
background-color: yellow;
transform: translateY(100px) rotateX(90deg);//形成下面
}
ul li:nth-child(5){
background-color: purple;
transform: translateZ(-100px);//形成前面
}
ul li:nth-child(6){
background-color: pink;
transform: translateZ(100px);//形成後面
}
</style>
如果註釋掉li3-6，f12改動ul的rotateY(0deg)值，從0到180度，效果如下：
綜合之後，六個面寫全，則效果圖如下：
正方體2— 下面這個實現過程中，先旋轉後平移，座標軸根據旋轉改變方向
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<style>
*{
margin: 0;
padding: 0;
}
ul{
width: 200px;
height: 200px;
border: 1px solid #000;
box-sizing: border-box;
margin: 100px auto;
position: relative;
transform: rotateY(0deg) rotateX(0deg);
transform-style: preserve-3d;
}
ul li{
list-style: none;
width: 200px;
height: 200px;
font-size: 60px;
text-align: center;
line-height: 200px;
position: absolute;
left: 0;
top: 0;
}
ul li:nth-child(1){
background-color: red;
transform: rotateX(90deg) translateZ(100px);//先旋轉後平移，座標軸隨之旋轉
}
ul li:nth-child(2){
background-color: green;
transform: rotateX(180deg) translateZ(100px);//先旋轉後平移，座標軸隨之旋
}
ul li:nth-child(3){
background-color: blue;
transform: rotateX(270deg) translateZ(100px);//先旋轉後平移，座標軸隨之旋
}
ul li:nth-child(4){
background-color: yellow;
transform: rotateX(360deg) translateZ(100px);//先旋轉後平移，座標軸隨之旋
}
ul li:nth-child(5){//5和6是左右兩個面
background-color: purple;
transform: translateX(-100px) rotateY(90deg);
}
ul li:nth-child(6){
background-color: pink;
transform: translateX(100px) rotateY(90deg);
}
</style>
解釋說明：
座標軸旋轉
以1爲例
效果圖
長方體
正方體變長方體，只需要在1~4的ul li:nth-child(i)中的transform屬性後面添加scale(2, 1)即可，這個屬性意爲拉伸。如下：
ul li:nth-child(1){
background-color: red;
transform: rotateX(90deg) translateZ(100px) scale(2, 1);
}
在5和6中設置如下：
ul li:nth-child(5){
background-color: purple;
transform: translateX(-200px) rotateY(90deg);
}
ul li:nth-child(6){
background-color: pink;
transform: translateX(200px) rotateY(90deg);
}
手動f12改變ul中繞x軸旋轉效果：
長方體無限自動循環
<body>
<ul>
<li><img src="images/banner1.png" alt=""></li>
<li><img src="images/banner2.jpg" alt=""></li>
<li><img src="images/banner3.jpg" alt=""></li>
<li><img src="images/banner4.jpg" alt=""></li>
<li></li>
<li></li>
</ul>
</body>
<style>
*{
margin: 0;
padding: 0;
}
body{
/*想看到整個立方的近大遠小效果, 就給ul的父元素添加透視*/
perspective: 500px;
}
ul{
width: 200px;
height: 200px;
box-sizing: border-box;
margin: 100px auto;
position: relative;
transform: rotateY(0deg) rotateX(0deg);
transform-style: preserve-3d;
animation: sport 5s linear 0s infinite normal;
}
ul li{
list-style: none;
width: 200px;
height: 200px;
font-size: 60px;
text-align: center;
line-height: 200px;
position: absolute;
left: 0;
top: 0;
}
ul li:nth-child(1){
background-color: red;
transform: rotateX(90deg) translateZ(100px) scale(2, 1);
}
ul li:nth-child(2){
background-color: green;
transform: rotateX(180deg) translateZ(100px) scale(2, 1);
}
ul li:nth-child(3){
background-color: blue;
transform: rotateX(270deg) translateZ(100px) scale(2, 1);
}
ul li:nth-child(4){
background-color: yellow;
transform: rotateX(360deg) translateZ(100px) scale(2, 1);
}
ul li:nth-child(5){
background-color: purple;
transform: translateX(-200px) rotateY(90deg);
}
ul li:nth-child(6){
background-color: pink;
transform: translateX(200px) rotateY(90deg);
}
ul li img{
/*
注意點:
只要父元素被拉伸了,子元素也會被拉伸
*/
width: 200px;
height: 200px;
}
@keyframes sport {
from{
transform: rotateX(0deg);
}
to{
transform: rotateX(360deg);
}
}
</style>
效果圖：
