資訊專欄INFORMATION COLUMN
摘要：分析代碼如下標簽里包裹一個盒子里包裹兩個，為效果的前后面做準備。分析外觀定位代碼如下效果首先創造環境，保留空間在的時候，我們讓旋轉，正面面對我們的元素向上翻轉，下面有元素翻轉上來，并且在翻轉時有一個凸出來的效果。
效果預覽
分析：可以看出hover的時候是有前后兩個面的翻轉，并且有一個凸出效果。
代碼如下：
CSS分析 1.外觀、定位代碼如下：
*{ box-sizing:border-box;}
.block-menu{background:black;}
.block-menu li{display:inline-block;}
.block-menu li a{
color:#fff;
text-decoration:none;
text-transform:uppercase;
font-size:24px;
line-height:20px;
font-weight:bold;
font-family: Arial, sans-serif;
display:block;
padding:15px 10px;
}
.three-d{
position:relative;
}
.three-d-box,.front,.back{
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
padding:15px 10px;
background:black;
}
2.3D效果
首先創造3D環境，保留3D空間：
.three-d{perspective:200px;}
.three-d-box{transform-style:preserve-3d;}
1.在three-d:hover的時候，我們讓.three-d-box旋轉，正面面對我們的元素向上翻轉，下面有元素翻轉上來，并且在翻轉時有一個凸出來的效果。
2.關于這個凸出的效果，大家可以進行測試，如果一個元素是以自己的中心為中心點進行翻轉時，是不會有凸出的效果。所以如果要制造一個凸出的效果，那么元素翻轉的中心就一定不是自己的中心。
3.同時我們看到，在翻轉的同時，元素貼回了ul所在的平面的，因此應該是在Z軸上有一定負的位移。
根據以上3點，我們可以設置3D變換：
.three-d:hover .three-d-box{
transform:translateZ(-50px) rotateX(90deg);
}
在這里，我先設置translateZ而不是rotateX，是因為rotateX之后坐標軸會變換，如果先roatetX后translateZ的話，Z軸的位移就不是垂直于ul平面（面對我們）的位移了。
由于變換時，.three-d-box有Z軸上的負位移，如果不給.front,.back設置Z軸上的位移的話，這兩個平面最后不會貼回ul的平面，而是在ul平面的后面。因此，我們給.front,.back設置Z軸正方向且等于變化時的位移的距離，如此，變化時，這兩個元素就會完美貼合ul所在的平面了。
.front,.back{transform:translateZ(50px);}
變換時，.back是從下面上來的，理應有一個rotateX(-90deg)的旋轉。如果先translateZ再rotateX的話，.back所在的Y軸上的高度是的一半，動畫時并沒有從下面上來的效果，因此，應該先rotateX變化坐標后再translateZ，這樣.back就在ul的“下方”了。
.front{transform:rotateX(0deg) translateZ(50px);}
.back{transform:rotateX(-90deg) translateZ(50px);}
在沒有hover的情況下，由于給.front,.back設置了translateZ，.front,.back看起來比正常的大。為了在沒有hover的情況下，.front能貼合，我給.three-d設置translateZ(-50px)，這樣.front雖然先跟隨.three-d在Z軸上有-50px的負位移，但隨后translateZ(50px)又讓它在Z軸上有50px的正位移，如此，便貼合了.
.three-d-box{transform:translateZ(-50px);}
最后，我們為這個變化添加一個過渡的效果：
.three-d-box{transition:all .3s;}
為了讓效果明顯，Z軸上的位移設置的較大值50px;在了解原理后，大家可以設置小一點的位移值，這樣下方的.back就不會如此明顯的看到了。
hover的時候，.three-d-box旋轉，它的子元素旋轉的中心點是.three-d-box的中心點而不是子元素自己的中心點哦~這樣你才能看到有凸出的效果。
hover的時候是會覆蓋原來的樣式，所以hover時，原始狀態是.three-d-box在Z軸的位移是0，.front,.back在Z軸的位移是50px;hover的時候以此為起點進行變換。
最終3D相關代碼如下：
.three-d{perspective:200px;}
.three-d-box{
transform-style:preserve-3d;
transform:translateZ(-25px);
transition: all .3s ;
}
.front{transform:rotateX(0deg) translateZ(25px);}
.back{transform:rotateX(-90deg) translateZ(25px);}
.three-d:hover .three-d-box{
transform: translateZ(-25px) rotateX(90deg);
}
總結
這個例子很好的說明了，一定要注意變換的中心點。
父元素變換時，子元素是以父元素的中心點為中心點變換的，而不是自己。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111187.html
摘要：實現方法可參考這篇文章純打造的模型渲染器實現全景。天空盒子相信很多打造過或有了解過全景的同行們都知道這個概念。首先將創建好的六個面切割出來，以命名標記位置。柱形柱形全景也不算復雜。 前言 對的，本文就是著重介紹如何使用CSS3中的3D變換打造出H5中的3D效果。靈感來源于造物節團隊的3d引擎，因為使用方法比較復雜，也沒有開源的API文檔，于是想自己另外造個輪子，便開始了相關內容的學習和...
摘要：寫在前面的前面現在拍電影搞真人秀都流行拍續集，哥今天給大家帶來的是打造最美機房的續集，哥的目標是成為機房界的網紅。機柜標簽機房中最重要的物理資源機柜是機房管理規劃監控人員最關注的對象之一。 寫在前面的前面 現在拍電影、搞真人秀都流行拍續集，哥今天給大家帶來的是打造最美3D機房的續集，哥的目標是成為3D機房界的網紅。 -------------------------------我是這個...
摘要：寫在前面的前面現在拍電影搞真人秀都流行拍續集，哥今天給大家帶來的是打造最美機房的續集，哥的目標是成為機房界的網紅。機柜標簽機房中最重要的物理資源機柜是機房管理規劃監控人員最關注的對象之一。 寫在前面的前面 現在拍電影、搞真人秀都流行拍續集，哥今天給大家帶來的是打造最美3D機房的續集，哥的目標是成為3D機房界的網紅。 -------------------------------我是這個...
閱讀 1534·2023-04-26 02:50
閱讀 3535·2023-04-26 00:28
閱讀 1931·2023-04-25 15:18
閱讀 3209·2021-11-24 10:31
閱讀 986·2019-08-30 13:00
閱讀 1000·2019-08-29 15:19
閱讀 1766·2019-08-29 13:09
閱讀 2975·2019-08-29 13:06
