CSS3 3D變換實例 滾動的正方體
阿新 • • 發佈：2018-01-09
ive spec osi 鏡像 tex -s 3d變換 itl 根據
筆記：
2D變換
transform
位移
translateX() translateY()
簡寫：translate(X值，Y值) 正值向右，負值向左
旋轉 rotate()
rotate(？deg) 括號中為角度值 正值是順時針旋轉，負值是逆時針旋轉
縮放 scale()
scale() 括號中為數值，可以為浮點數 如大於1是放大效果，小於1是縮小效果
變形（斜切）
skewX() skewY()
簡寫：skew(X軸斜切角度，Y軸斜切角度)
body:hover div{
transform:translate(100px,100px) rotate(30deg) scale(1.5) skew(40deg,40deg)
}
解析順序：根據transform內寫的順序進行解析。
變換原點：
transform-orign:
left right top bottom
center（默認） 當設置相應的值後，會按照相應設置的值發生變換。
3D變換
3D效果：首先給需要進行3D變換元素的父級添加3D環境和景深。
寫法：
transform-style:preserve-3d; <!--添加3D環境-->
perspective:數值; 如：300px; <!--景深--> 數值較低的話無效果
transform
rotateX 沿X軸旋轉：正值向右翻轉，負值向左翻轉
rotateY 沿y軸旋轉：正值向右翻轉，負值向左翻轉
rotateZ 沿z軸旋轉：正值向屏幕外，負值向屏幕內
translateX 沿X軸位移：正值向右，負值向左
translateY 沿y軸位移：正值向下，負值向上
translateZ 沿z軸位移：正值向屏幕外，負值向屏幕內
實例代碼：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>3D正方形實例</title> 6 <style type="text/css"> 7 #box{ 8 width: 100px; 9 height: 100px; 10 padding: 100px; 11 margin: 100px auto; 12 perspective:300px; 13 } 14 15 #val{ 16 width: 100px; 17 height: 100px; 18 position: relative;/*設置相對定位*/ 19 transform-style: preserve-3d;/*給父級設置3D環境*/ 20 transform-origin: center center -50px;/*沿中軸線轉動*/ 21 transition: 1s;/*響應時間1s*/ 22 } 23 #val div{ 24 position: absolute;/*設置絕對定位*/ 25 width: 100px; 26 height: 100px; 27 background: blue; 28 text-align: center; 29 font: 40px/100px "微軟雅黑"; 30 } 31 #val div:nth-of-type(1){ 32 background: yellow; 33 } 34 #val div:nth-of-type(2){ 35 left:-100px;/*定位 沿X軸向左移動100px*/ 36 background: red; 37 transform-origin: right;/*位移點為右邊*/ 38 transform:rotateY(-90deg);/*向Y軸翻轉向左90度*/ 39 } 40 #val div:nth-of-type(3){ 41 top:-100px;/*定位 沿Y軸向上移動100px*/ 42 background:pink; 43 transform-origin: bottom;/*位移點為下邊*/ 44 transform:rotateX(90deg); /* 沿X軸向內翻轉90度*/ 45 } 46 #val div:nth-of-type(4){ 47 left:100px; 48 background: #FF6600; 49 transform-origin: left; 50 transform:rotateY(90deg); 51 } 52 #val div:nth-of-type(5){ 53 top:100px; 54 background: #1883BA; 55 transform-origin: top; 56 transform:rotateX(-90deg); 57 } 58 #val div:nth-of-type(6){ 59 background: gray; 60 transform:translateZ(-100px) rotateX(-180deg); /*翻轉180度,不然數字6為鏡像顯示*/ 61 } 62 #val:hover { 63 transform: rotateY(360deg) ; /*鼠標停留,X軸旋轉360度,Y軸旋轉30度*/ 64 } 65 </style> 66 </head> 67 <body> 68 <div id="box"> 69 <div id="val"> 70 <div>1</div> 71 <div>2</div> 72 <div>3</div> 73 <div>4</div> 74 <div>5</div> 75 <div>6</div> 76 </div> 77 </div> 78 </body> 79 </html>
實現效果：鼠標停留，立方體旋轉。
CSS3 3D變換實例 滾動的正方體