基于CSS3實現立方體自轉效果
發(fā)布時間：2016-03-01 15:01:47 作者：佚名 
我要評論
我要評論這篇文章主要介紹了基于CSS3實現立方體自轉效果 的相關資料,需要的朋友可以參考下
先是HTML 一個父div包含四個絕對定位的div
首先，一個靜態(tài)的立方體
讓立方體轉起來
這里定義了一個動畫 rot
從起始位置轉動到 Y軸-330deg X軸370deg
并且循環(huán)無限次，每次4s
基于CSS3實現立方體自轉效果 的全部內容就給大家介紹完了，希望對大家有所幫助！
CSS Code復制內容到剪貼板
- <div class='container container--realistic'>
- <div class='cube cube--ani'>
- <div class='face'>1</div>
- <div class='face'>2</div>
- <div class='face'>3</div>
- <div class='face'>4</div>
- </div>
- </div>
CSS Code復制內容到剪貼板
- .face:nth-child() {
- -webkit-transform: /*rotateY(deg)*/ translateZ(.em /* half the side length, em in this case */);
- }
- .face:nth-child() {
- -webkit-transform: rotateY( deg) translateZ(.em);
- }
- .face:nth-child() {
- -webkit-transform: rotateY(deg) translateZ(.em);
- }
- .face:nth-child() {
- -webkit-transform: rotateY(deg) translateZ(.em);
- }
CSS Code復制內容到剪貼板
- .cube--ani {
- -webkit-animation: rot s linear infinite;
- }
- @-webkit-keyframes rot {
- to { -webkit-transform: rotateY(-deg) rotateX(deg); }
- }
從起始位置轉動到 Y軸-330deg X軸370deg
并且循環(huán)無限次，每次4s
基于CSS3實現立方體自轉效果 的全部內容就給大家介紹完了，希望對大家有所幫助！
相關文章
CSS3實現3D立方體旋轉動畫特效是一款純CSS3制作的3d旋轉動畫效果2015-01-09
這是一款非常大氣華麗的HTML5/CSS3 3D實現的全屏3D焦點圖特效插件，在頁面的兩側，有兩個帶有立體浮動效果的左右箭頭進行圖片的切換。其焦點圖的圖片切換方式是3D效果的，2014-07-10
這是一款視覺效果超炫的采用CSS3實現的3D立方體動畫，與以往的立方體動畫效果不同的是，這款CSS3立方體動畫的幾個表面的背景顏色都有漸變的動畫效果，并且會伴隨著立方體的2014-06-17
一款HTML5動畫，立方體會在不同的角度進行扭曲、放大和縮小2014-06-06
css3 transform 3d 使用html5+css3創(chuàng)建動態(tài)旋轉的3d立方體
今天向大家介紹如何使用css3創(chuàng)建3d的立方體,操作方法為：上下左右鍵，實現立方體的翻轉旋轉效果2013-01-06css3 transform 3d 使用css3創(chuàng)建動態(tài)3d立方體(html5實踐)
在今天的課程中，我將向大家介紹如何使用css3創(chuàng)建3d的立方體,操作方法為：上下左右鍵，實現立方體的翻轉旋轉效果，特酷，本人看后，目瞪口呆，值得收藏于參考2013-01-06
