CSS3-3D转换
目錄
1.1三維坐標系
1.2 3D移動translate3d
1.3 透視perspective
1.4 3D旋轉 rotate3d
1.5 3D呈現 transform-style
2.1兩面翻轉盒子案例
3D導航欄
旋轉木馬
有什么特點
-
近大遠小
-
物體后面遮擋不可見
1.1三維坐標系
-
x軸：水平向右 注意：x右邊是正值，左邊是負值
-
y軸：水平向下 注意：y下邊是正值，上邊是負值
-
z軸：垂直屏幕 注意：往外面是正值，往里面是負值
?
主要知識點
-
3D位移：translate3d（x，y，z）
-
3D旋轉：retate3d（x，y，z）
-
透視：perspective
-
3D呈現：transfrom-style
1.2 3D移動translate3d
-
transform:translateX(100px):僅僅在x軸上移動
-
transform:translateY(100px):僅僅在Y軸上移動
-
transform:translateZ(100px):僅僅在Z軸上移動（translateZ一般用px單位）
-
transform：translate3d（x，y，z）：其中x、y、z分別指要移動的軸的方向的距離
-
xyz是不能省略的，如果沒有就寫0
1.3 透視perspective
在2D平面產生近大遠小視覺立體，但是只是二維效果的
-
如果想要在網頁產生3D效果需要透視（理解為3D物體投影在2D平面內）
-
模擬人類的視覺位置，可以安排一只眼睛去看
-
透視我們也稱作視距：視距就是人的眼睛到屏幕的距離
-
距離視覺點月近的在電腦平面成像越大，越遠成像越小
-
透視的單位是像素
近大遠小：
?
d：就是視距，視距就是人的眼睛到屏幕的距離
z：就是z軸，物體距離屏幕的距離，z為正值時，z軸越大我們看到物體越大。z為負值時，z軸越大我們看到的物體越小。
透視寫在被觀察元素的父盒子上面
<style>body {/* 盒子沒了的原因是因為透視距離比盒子z軸移動要小 */perspective: 200px;}div {width: 200px;height: 200px;background-color: yellow;/* xyz是不能省略的，如果沒有就寫0 */transform: translate3d(500px, 200px, 100px);}</style> <body><div></div></body>1.4 3D旋轉 rotate3d
rotatex
左手準則
-
左手的拇指指向x軸正方向
-
其余手指的彎曲方向就是該元素沿著x軸旋轉的方向
?
<style>body {perspective: 300px;}img {display: block;margin: 100px auto;transition: all 2s;}img:hover {transform: rotatex(360deg);}</style> <body><img src="../images/kk.jpg" alt=""> </body>?
rotateY
左手準則
-
左手的拇指指向y軸正方向(向下)
-
其余手指的彎曲方向就是該元素沿著y軸旋轉的方向
?
rotateZ
左手準則
-
左手的拇指指向Z軸正方向(向自己)
-
其余手指的彎曲方向就是該元素沿著Z軸旋轉的方向
rotate3d
transform: rotate3d(x,y,z,deg):沿著自定義軸旋轉deg為角度
xyz是表示旋轉軸的矢量，是標示你是否希望沿著該軸旋轉，最后一個標示旋轉的角度
-
transform：roteta3d（1,0,0,deg）沿著x軸旋轉45deg
-
transform: rotate3d(1,1,0,deg) 沿著對角線旋轉45deg
1.5 3D呈現 transform-style
-
控制子元素是否開啟三維立體壞境
-
transform-style：flat子元素不開啟3d立體空間 默認的
-
transform-style： preserve-3d；子元素開啟立體空間
-
代碼寫給父級，但是影響的是子盒子
-
這個屬性很重要，后面必用
?
2.1兩面翻轉盒子案例
<style>body {perspective: 300px;}.box {position: relative;width: 300px;height: 300px;margin: 100px auto;transform-style: preserve-3d;transition: all 1s;}.box:hover {transform: rotateY(180deg);}.one {position: absolute;top: 0;top: 0;width: 300px;height: 300px;line-height: 300px;text-align: center;backface-visibility: hidden;background-color: orange;font-size: 30px;color: #fff;border-radius: 50%;/* transition: all 2s; */z-index: 1;}.back {position: absolute;top: 0;top: 0;width: 300px;height: 300px;line-height: 300px;text-align: center;font-size: 30px;backface-visibility: hidden;transform: rotateY(180deg);color: #fff;background-color: skyblue;transition: all 2s;border-radius: 50%;}</style> <body><div class="box"><div class="one">鍵盤敲爛</div><div class="back">月入過萬</div></div></body>?
3D導航欄
<style>* {margin: 0;padding: 0;}li {float: left;list-style: none;margin: 20px;width: 120px;height: 35px;perspective: 500px;}.box {position: relative;height: 100%;transform-style: preserve-3d;transition: all 0.5s;}.box:hover {transform: rotateX(90deg);}.main,.bottom {position: absolute;top: 0;left: 0;line-height: 35px;text-align: center;width: 100%;height: 100%;}.main {background-color: orange;transform: translatez(17.5px);z-index: 1;}.bottom {background-color: yellowgreen;transform: translateY(50%) rotateX(-90deg);}</style> <body><ul><li><div class="box"><div class="main">我是我是我是</div><div class="bottom">糕糕糕糕糕</div></div></li><li><div class="box"><div class="main">我是我是我是</div><div class="bottom">糕糕糕糕糕</div></div></li><li><div class="box"><div class="main">我是我是我是</div><div class="bottom">糕糕糕糕糕</div></div></li><li><div class="box"><div class="main">我是我是我是</div><div class="bottom">糕糕糕糕糕</div></div></li><li><div class="box"><div class="main">我是我是我是</div><div class="bottom">糕糕糕糕糕</div></div></li></ul></body>重點：要將orange（面向我們的）盒子transform：translateZ（17.5px），如果還是給green（底部）盒子加位移的translateZ（-17.5px）話，旋轉軸在orange盒子平面中間，相當于在正方體的一面為中心旋轉，旋轉會產生偏移。而移動orange盒子后，orange盒子向前，green盒子向下，旋轉軸不變，這時旋轉軸就會在這個正方體的正中，那么旋轉就不會產生偏移了
以orange盒子平面的中心旋轉（以正方體的一面為中心旋轉）
以原orange盒子的中心旋轉（orange盒子外移，將旋轉中心變成了正方體正中）
旋轉木馬
<style>body {perspective: 1400px;}section {position: relative;width: 452px;height: 302px;margin: 200px auto;background: url(../images/ss.jpg) no-repeat;animation: rotate 15s linear infinite;transform-style: preserve-3d;}section:hover {animation-play-state: paused;}@keyframes rotate {0% {transform: rotateY(0) rotatex(-20deg);}100% {transform: rotateY(360deg) rotatex(-20deg);}}div {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: url(../images/kk.jpg) no-repeat;}div:first-child {transform: translateZ(400px);}div:nth-child(2) {transform: rotateY(60deg) translateZ(400px);}div:nth-child(3) {transform: rotateY(120deg) translateZ(400px);}div:nth-child(4) {transform: rotateY(180deg) translateZ(400px);}div:nth-child(5) {transform: rotateY(240deg) translateZ(400px);}div:last-child {transform: rotateY(300deg) translateZ(400px);}</style> <body><section><div></div><div></div><div></div><div></div><div></div><div></div></section></body>?原理： 設置section大盒子在添加6個子盒子，設置section的寬高為圖片大小，margin居中以及相對定位，之后設置子盒子絕對定位插入背景圖片，隨后使用transform，除第一張外每張圖在前一張的基礎上多rotate：60deg，先旋轉后位移，即可做到6張圖片分布在Y軸周圍。隨后定義動畫rotae，添加給section。再給section開啟3D呈現transform-style： preserve-3d，最后給body添加視距perspective即可完成。
總結
- 上一篇： 罗克韦尔协议转换网关WTGNet-AB
- 下一篇： JavaScript 进阶知识 - 特效