一、什么是css3 3d旋轉 ？
形成一個3D空間： transform-style:preserve-3d ( 讓父元素形成3D，讓其子元素在3D空間進行變化 )。
3d場景，在垂直於屏幕的方法，相對於3d多出個z軸，Z軸：靠近屏幕的方向是正向，遠離屏幕的方向是反向，2d場景，在屏幕上水平和垂直的交叉線x軸和y軸。
二、關於css 3d旋轉的相關屬性及使用方法
變形屬性：transform
3D功能函數 ----3D的位移：transform:translate3d(x,y,z); 3D縮放：transform:scale3d(x,y,z);
translateX() scaleX()
translateY() scaleY()
translateZ() scaleZ()
3D的旋轉:
ransform:rotate();
rotateX() - x：是一個0到１之間的數值，主要用來描述元素圍繞X軸旋轉的矢量值；
rotateY() - y：是一個０到１之間的數值，主要用來描述元素圍繞Y軸旋轉的矢量值；
rotateZ() //默認情況效果類似 - z：是一個０到１之間的數值，主要用來描述元素圍繞Z軸旋轉的矢量值；
rotate3D()
rotate3D(x,y,z,a) [ 0不旋轉。1旋轉 ] - a：是一個角度值，主要用來指定元素在3D空間旋轉的角度，如果其值為正值，元素順時針旋轉，反之元素逆時針旋轉。
注意：在translate屬性值中要是填寫三個值，必須加上3d，即translate3d，rotate3d，scale3d
三、css3 3d旋轉圖片立方體特效代碼
思路分析：先在一個盒子里面設置6個面，6個面都放在盒子內部，然后分別把6個面往6個不同的方向運動，形成立方體。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin:0;
padding:0;
}
.box{
width:300px;
height:300px;
position:fixed;
left:0;right:0;
top:0;bottom:0;
margin:auto;
transform-style: preserve-3d; //形成3d空間）
transform:rotateX(20deg) rotateY(30deg); //為了方便觀察讓3D舞台轉動角度
transition:2s; //為了過度看起來更舒服
}
.box div{
width:300px;
height:300px;
text-align: center;
line-height:300px;
font-size: 100px;
font-weight:bolder;
color:#fff;
position:absolute; //讓6個面全部定位在父元素里面
left:0;top:0;
opacity:0.5; //透明屬性
border:2px solid #000;
backface-visibility:hidden; //使背面不可見，方便自己看，也可以不設置
}
.con1{
/* 第一個面往前走 */
background:red;
transform:translateZ(150px);
}
.con2{
/* 第二個面往后走 */
background:blue;
transform:translateZ(-150px) rotateY(180deg); /*rotateY(180deg) 讓正面朝外*/
}
.con3{
/* 先往上位移150px 再繞着X軸轉動90deg */
background:pink;
transform:translateY(-150px) rotateX(90deg);
}
.con4{
/* 先往下位移150px,再繞着X軸轉動90deg */
background:green;
transform:translateY(150px) rotateX(-90deg);
}
.con5{
/* 先往左位移150px , 再繞着Y軸轉動90deg */
background:rosybrown;
transform:translateX(-150px) rotateY(-90deg);
}
.con6{
/* 先往右側位移150px,再繞着Y軸轉動90deg */
background:#000;
transform:translateX(150px) rotateY(90deg);
}
</style>
</head>
<body>
<div class="box">
<div class="con1">1</div>
<div class="con2">2</div>
<div class="con3">3</div>
<div class="con4">4</div>
<div class="con5">5</div>
<div class="con6">6</div>
</div>
</body>
</html>
