css之3D變換
阿新 • • 發佈：2018-09-11
場景 視角 lex width col ext css doc line
3D變換的x，y，z軸是分別效果是：
x軸旋轉的話，就是頭和腳進行轉動
y軸旋轉的話，就是左右手進行轉動
z軸旋轉的話，就是整個身體平鋪在旋轉。
上面是針對旋轉的意思去，但是對於其他的類似一樣，就是這樣子去理解x，y，z軸的在哪裏的
transform: rotateX(360deg);
transform: rotateY(360deg);
transform: rotateZ(360deg);
變換跟2D同理
最主要的區別是透視視圖“景深”
<!--景深的作用：
1、讓3D場景有近大遠小的效果（就是肉眼距離屏幕的距離）
2、是一個不可以繼承的。但他可以作用於後代元素（不是作用於本身的）
原理：
景深越大，滅點越遠，元素變形更小
景深越小，滅點越近，元素變形更大
滅點：滅點就是你看到的盡頭
景深基點：視角的位置
組合變換的話，放本身的話，一定要放在首位
如果要讓景深有效果，又想放在本身的元素上，就需要進行組合處理。例如：
transform:perspective(100px) rotateX(360deg) ;
總體代碼如圖所示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } #wrap{ width: 400px; height: 400px; position: absolute; top: 50%; left: 50%; margin-left: -200px; margin-top: -200px; border: 1px solid black; /*perspective: 100px;*/ } #inner{ width: 200px; height: 200px; position: absolute; top: 50%; left: 50%; margin-left: -100px; margin-top: -100px; border: 1px solid pink; border-radius: 50%; text-align: center; line-height: 200px; font-weight: bold; transition: 2s; } #wrap:hover #inner{ /*transform: rotateX(360deg); transform: rotateY(360deg); transform: rotateZ(360deg); transform: scaleX(2); transform: scaleZ(2);*/ /*transform: translateZ(100px);*/ transform:perspective(100px) rotateX(360deg) ; } </style> </head> <body> <div id="wrap"> <div id="inner"> Rainbow </div> </div> </body> </html>
-->
css之3D變換