css3實現的立方體旋轉效果
本章節分享一段程式碼例項,它實現了立方體旋轉效果。
當滑鼠懸浮,立方體可以展開,效果非常的好,感興趣的朋友可以做一下參考。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> @keyframes rotate { 0% { transform: rotateX(0deg) rotateY(0deg); } 100% { transform: rotateX(360deg) rotateY(360deg); } } @-webkit-keyframes rotate { 0% { transform: rotateX(0deg) rotateY(0deg); } 100% { transform: rotateX(360deg) rotateY(360deg); } } html { background: linear-gradient(#ff0 0%,#3F9 80%); height: 100%; } .wrap { margin: 150px auto; perspective: 1000px; width: 200px; height: 200px; } .cube { margin: auto; width: 200px; height: 200px; position: relative; transform-style: preserve-3d; animation: rotate 20s infinite linear; } .cube > div { width: 100%; height: 100%; position: absolute; background-color: #333; opacity: .9; border: 1px solid #fff; color: #fff; font-size: 36px; font-family: "微軟雅黑"; font-weight: bold; text-align: center; line-height: 200px; transition: transform .2s ease-in; -webkit-transition: transform .2s ease-in; } .cube > span { display: block; width: 100px; height: 100px; border: 1px solid #000; background-color: #999; position: absolute; top: 50px; left: 50px; } .cube > span img { width: 100px; height: 100px; } .cube .out-front { transform: translateZ(100px); -moz-transform: translateZ(100px); -webkit-transform: translateZ(100px); } .cube .out-back { transform: translateZ(-100px) rotateY(180deg); -moz-transform: translateZ(-100px) rotateY(180deg); -webkit-transform: translateZ(-100px) rotateY(180deg); } .cube .out-left { transform: translateX(-100px) rotateY(-90deg); -moz-transform: translateX(-100px) rotateY(-90deg); -webkit-transform: translateX(-100px) rotateY(-90deg); } .cube .out-right { transform: translateX(100px) rotateY(90deg); -moz-transform: translateX(100px) rotateY(90deg); -webkit-transform: translateX(100px) rotateY(90deg); } .cube .out-top { transform: translateY(-100px) rotateX(90deg); -moz-transform: translateY(-100px) rotateX(90deg); -webkit-transform: translateY(-100px) rotateX(90deg); } .cube .out-bottom { transform: translateY(100px) rotateX(-90deg); -moz-transform: translateY(100px) rotateX(-90deg); -webkit-transform: translateY(100px) rotateX(-90deg); } .cube .in-front { transform: translateZ(50px); -moz-transform: translateZ(50px); -webkit-transform: translateZ(50px); } .cube .in-back { transform: translateZ(-50px) rotateY(180deg); -moz-transform: translateZ(-50px) rotateY(180deg); -webkit-transform: translateZ(-50px) rotateY(180deg); } .cube .in-left { transform: translateX(-50px) rotateY(-90deg); -moz-transform: translateX(-50px) rotateY(-90deg); -webkit-transform: translateX(-50px) rotateY(-90deg); } .cube .in-right { transform: translateX(50px) rotateY(90deg); -moz-transform: translateX(50px) rotateY(90deg); -webkit-transform: translateX(50px) rotateY(90deg); } .cube .in-top { transform: translateY(-50px) rotateX(90deg); -moz-transform: translateY(-50px) rotateX(90deg); -webkit-transform: translateY(-50px) rotateX(90deg); } .cube .in-bottom { transform: translateY(50px) rotateX(-90deg); -moz-transform: translateY(50px) rotateX(-90deg); -webkit-transform: translateY(50px) rotateX(-90deg); } .wrap:hover .cube .out-front { transform: translateZ(200px); -moz-transform: translateZ(200px); -webkit-transform: translateZ(200px); } .wrap:hover .cube .out-back { transform: translateZ(-200px) rotateY(180deg); -moz-transform: translateZ(-200px) rotateY(180deg); -webkit-transform: translateZ(-200px) rotateY(180deg); } .wrap:hover .cube .out-left { transform: translateX(-200px) rotateY(-90deg); -moz-transform: translateX(-200px) rotateY(-90deg); -webkit-transform: translateX(-200px) rotateY(-90deg); } .wrap:hover .cube .out-right { transform: translateX(200px) rotateY(90deg); -moz-transform: translateX(200px) rotateY(90deg); -webkit-transform: translateX(200px) rotateY(90deg); } .wrap:hover .cube .out-top { transform: translateY(-200px) rotateX(90deg); -moz-transform: translateY(-200px) rotateX(90deg); -webkit-transform: translateY(-200px) rotateX(90deg); } .wrap:hover .cube .out-bottom { transform: translateY(200px) rotateX(-90deg); -moz-transform: translateY(200px) rotateX(-90deg); -webkit-transform: translateY(200px) rotateX(-90deg); } </style> </head> <body> <div class="wrap"> <div class="cube"> <div class="out-front"><img src="demo/CSS/img/1602/6421919920043.jpg"></div> <div class="out-back"><img src="demo/CSS/img/1602/6821919920043.jpg"></div> <div class="out-left"><img src="demo/CSS/img/7231919920043.jpg"></div> <div class="out-right"><img src="demo/CSS/img/7591919920043.jpg"></div> <div class="out-top"><img src="demo/CSS/img/8111919920043.jpg"></div> <div class="out-bottom"><img src="demo/CSS/img/8551919920043.jpg"></div> <span class="in-front"><img src="demo/CSS/img/6421919920043.jpg"></span> <span class="in-back"><img src="demo/CSS/img/6821919920043.jpg"></span> <span class="in-left"><img src="demo/CSS/img/7231919920043.jpg"></span> <span class="in-right"><img src="demo/CSS/img/7591919920043.jpg"></span> <span class="in-top"><img src="demo/CSS/img/8111919920043.jpg"></span> <span class="in-bottom"><img src="demo/CSS/img/8551919920043.jpg"></span> </div> </div> </body> </html>
相關文章
- css3實現的立方體3D旋轉效果CSSS33D
- css3實現動態摺疊生成立方體旋轉效果CSSS3
- CSS3立方體3D旋轉效果CSSS33D
- CSS3 立方體翻轉效果CSSS3
- css3實現的旋轉的陀螺效果CSSS3
- css3實現的3D立體旋轉效果CSSS33D
- css3實現環狀旋轉效果CSSS3
- CSS3多面體旋轉效果CSSS3
- CSS3實現的3D旋轉效果CSSS33D
- css3實現的旋轉載入等待效果CSSS3
- CSS3邊框旋轉動畫實現效果CSSS3動畫
- jQuery和css3實現的摩天輪旋轉效果jQueryCSSS3
- CSS3實現的小球旋轉載入等待效果CSSS3
- | / - 的旋轉效果實現(轉)
- css3實現的旋轉魔方效果程式碼例項CSSS3
- css3實現的loadding旋轉載入效果CSSS3
- css3實現旋轉loadding載入效果CSSS3
- js和css3實現360旋轉滾動效果JSCSSS3
- CSS3實現的div元素旋轉一定角度效果CSSS3
- CSS3 旋轉魔方效果CSSS3
- SVG實現的圓環旋轉效果SVG
- css3實現旋轉的太極圖效果程式碼例項CSSS3
- CSS3實現的立方體3D滾動效果程式碼例項CSSS33D
- CSS3圖片旋轉效果CSSS3
- CSS3星系旋轉效果代CSSS3
- CSS3旋轉載入等待效果CSSS3
- CSS3 圓環內部旋轉效果CSSS3
- CSS3地月星系旋轉效果CSSS3
- css3立方體效果程式碼例項CSSS3
- canvas實現的旋轉太極圖效果Canvas
- css3實現橢圓軌跡旋轉CSSS3
- 簡單的css3頭像旋轉與3D旋轉效果CSSS33D
- CSS3滑鼠懸浮div旋轉效果CSSS3
- CSS3旋轉風車效果程式碼CSSS3
- CSS3旋轉效果程式碼例項CSSS3
- CSS3 3d旋轉魔方效果CSSS33D
- CSS3 太陽系星球旋轉效果CSSS3
- CSS3實現的環形旋轉載入補全效果程式碼例項CSSS3