網頁|3D正方體照片效果
- 2019 年 11 月 27 日
- 筆記
問題描述
背景介紹：
前幾天看了一個小視頻，了解到了3D正方體照片的打印效果。看的時候注意作者是使用HTML標籤進行實現的。就想嘗試自己寫一下。這種3D照片效果，在我們生活中還是比較常見的。但在網頁網站的設計中還是比較少見。我們常見的圖片顯示效果一般還是以輪播圖為主。所以常用3D正方體效果來顯示圖片的話就會較新穎，獨特，更具吸引力。
解決方案
1.相關標籤介紹：
正方體的效果，很明顯我們需要翻折，旋轉等標籤屬性。在之前的打印六邊形的效果的博客中，我們已經介紹了有關翻轉標籤。這裡就再簡單的介紹一下:
transform功能來實現文字或圖像的旋轉、縮放、傾斜、移動這四種類型的變形處理。transform: rotate(-60deg) skew(30deg)。其中Deg是表示傾斜角度的單位。Rotate表示旋轉，skew傾斜。
2.實現過程：
在實現3D正方體照片效果的過程中，首先我們可以先將照片以及其他需要元素用HTML進行簡單的羅列。這裡我們可以增加類似輪播圖效果的翻頁。這樣我們在觀看圖片的時候，就可以根據自身需要進行選擇。
代碼如下：
</div> <input type="radio" checked id="radio-front" name="select-face"/> <input type="radio" id="radio-left" name="select-face"/> <input type="radio" id="radio-right" name="select-face"/> <input type="radio" id="radio-top" name="select-face"/> <input type="radio" id="radio-bottom" name="select-face"/> <input type="radio" id="radio-back" name="select-face"/> <div></div> <div> <div> <div></div> <div class="_3dface _3dface--top"></div> <div class="_3dface _3dface--bottom"></div> <div class="_3dface _3dface--left"></div> <div class="_3dface _3dface--right"></div> <div class="_3dface _3dface--back"></div> </div> </div>
|
|
|---|
對上面的代碼運行後，我們得到的就是一些簡單的元素。相關元素的樣式，我們可能還需要進行進一步的設置。進一步的樣式設置，我們首先可以將圖片添加上去。樣式設計的話，主要就是通過盒子模型，邊框，還有就是翻轉，傾斜，摺疊
樣式設置：
body { color: #333; padding: 20px; text-align: center; font-family: Arial; } .separator { margin-top: 40px; } .twitter { color: #FFF; text-decoration: none; border-radius: 4px; background: #00ACED; display: inline-block; padding: 10px 8px; margin-bottom: 15px; font-weight: bold; } .space3d { perspective: 1000px; width: 250px; height: 250px; text-align: center; display: inline-block; } ._3dbox { display: inline-block; transition: all 0.85s; text-align: center; position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transform: rotateX(-15deg) rotateY(15deg); } ._3dface { overflow: hidden; position: absolute; border: 1px solid #888; background: #FFF; box-shadow: inset 0 0 60px rgba(0, 0, 0, 0.1), 0 0 50px rgba(0, 0, 0, 0.3); color: #333; line-height: 250px; opacity: 0.8; } ._3dface--front { width: 250px; height: 250px; transform: translate3d(0, 0, 125px); } ._3dface--top { width: 250px; height: 250px; transform: rotateX(90deg) translate3d(0, 0, 125px); } ._3dface--bottom { width: 250px; height: 250px; transform: rotateX(-90deg) translate3d(0, 0, 125px); } ._3dface--left { width: 250px; height: 250px; left: 50%; margin-left: -125px; transform: rotateY(-90deg) translate3d(0, 0, 125px); } ._3dface--right { width: 250px; height: 250px; left: 50%; margin-left: -125px; transform: rotateY(90deg) translate3d(0, 0, 125px); } ._3dface--back { width: 250px; height: 250px; transform: rotateY(180deg) translate3d(0, 0, 125px); } #radio-left:checked ~ .space3d ._3dbox { transform: rotateY(90deg); } #radio-right:checked ~ .space3d ._3dbox { transform: rotateY(-90deg); } #radio-bottom:checked ~ .space3d ._3dbox { transform: rotateX(90deg); } #radio-top:checked ~ .space3d ._3dbox { transform: rotateX(-90deg); } #radio-back:checked ~ .space3d ._3dbox { transform: rotateY(180deg); } ._3dface--front { background: url(img/背景圖片/1111111.png); background-size: 100%; } ._3dface--left { background: url(img/背景圖片/90c2a7d1d995d6c37114d0bf61e1533a.jpg); background-size: auto 100%; } ._3dface--right { background: url(img/背景圖片/b9a5cbdce3c2b1a72470685a2106f98e.jpg); background-size: auto 100%; } ._3dface--top { background: url(img/背景圖片/download.jpg); background-size: auto 100%; } ._3dface--bottom { background: url(img/背景圖片/u=25449582,2238308793&fm=15&gp=0.jpg); background-size: auto 100%; } ._3dface--back { background: url(img/背景圖片/u=2984323656,369738739&fm=26&gp=0.jpg); background-size: auto 100%; }
|
|
|---|
顯示效果：
圖3.1 顯示效果
結語
在我看來，學習的途徑是比較多，勞逸結合也是非常重要的。在我們平時刷視頻，看資訊的時候，如果看到一些感興趣的有關學習的東西，我們還是可以嘗試一下。
參考文獻
END
實習主編 | 王楠嵐
責 編 | 劉 連
where2go 團隊
微信號：算法與編程之美
長按識別二維碼關注我們!
溫馨提示：點擊頁面右下角「寫留言」發表評論，期待您的參與！期待您的轉發！
