CSS3 立方體翻轉效果
分享一段程式碼例項,它實現了立方體翻轉效果。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> *{ margin: 0; padding: 0; } .bigger{ transform-style:preserve-3d; animation: autoPaly 6s alternate infinite; animation-delay: 14s; width: 400px; height: 400px; margin: 150px auto; } .box{ width: 250px; height: 250px; border: 1px dashed red; margin:100px auto; position: relative; transform-style:preserve-3d; border-radius: 50%; animation: boxPlay 2s forwards ; } .box>div{ width: 100%; height: 100%; position: absolute; text-align: center; line-height: 250px; font-size:60px; color:#daa520; } .left{ background-color: rgba(255,0, 0,1); animation: leftPlay 2s forwards; animation-delay: 2s; } .right{ background-color: rgba(0, 255, 0, 0.7); animation: rightPlay 2s forwards; animation-delay: 4s; } .forward{ background-color:rgba(0, 255, 255, 0.7); animation: forwardPlay 2s forwards; animation-delay: 6s; } .back{ background-color:rgba(0, 0, 255, 0.7); animation: backPlay 2s forwards; animation-delay: 8s; } .up{ background-color:rgba(255, 0, 255, 0.7); animation: upPlay 2s forwards; animation-delay: 10s; } .down{ background-color:rgba(105, 178, 35, 0.7); animation: downPlay 2s forwards; animation-delay: 12s; } @keyframes boxPlay { 0%{ transform: rotateY(0deg) rotateX(0deg); } 100%{ transform: rotateY(-20deg) rotateX(30deg); } } @keyframes leftPlay { 0%{ transform: translateX(0px) rotateY(0deg); background-color: rgba(255,0, 0,1); } 50%{ transform: translateX(-125px) rotateY(0deg); background-color: rgba(255,0, 0,.8); } 75%{ transform: translateX(-125px) rotateY(0deg); background-color: rgba(255,0, 0,7); } 100%{ transform: translateX(-125px) rotateY(-90deg); background-color: rgba(255,0, 0,.6); } } @keyframes rightPlay { 0%{ transform: translateX(0px) rotateY(0deg); } 50%{ transform: translateX(125px) rotateY(0deg); } 75%{ transform: translateX(125px) rotateY(0deg); } 100%{ transform: translateX(125px) rotateY(90deg); } } @keyframes forwardPlay { 0%{ transform: translateY(0px) rotateX(0deg); } 50%{ transform: translateY(125px) rotateY(0deg); } 75%{ transform: translateY(125px) rotateY(0deg); } 100%{ transform: translateY(125px) rotateX(-90deg); } } @keyframes backPlay { 0%{ transform: translateY(0px) rotateX(0deg); } 50%{ transform: translateY(-125px) rotateY(0deg); } 75%{ transform: translateY(-125px) rotateY(0deg); } 100%{ transform: translateY(-125px) rotateX(90deg); } } @keyframes upPlay { 0%{ transform: translateZ(0px); } 100%{ transform: translateZ(125px); } } @keyframes downPlay { 0%{ transform: translateZ(0px); } 100%{ transform: translateZ(-125px); } } @keyframes autoPaly { 0%{ transform: rotateY(0deg) rotateX(0deg); } 100%{ transform: rotateX(600deg) rotateY(1200deg); } } </style> </head> <body> <div class="bigger"> <div class="box"> <div class="up">上</div> <div class="down">下</div> <div class="left">左</div> <div class="right">右</div> <div class="forward">前</div> <div class="back">後</div> </div> </div> </body> </html>
相關文章
- css3實現的立方體旋轉效果CSSS3
- CSS3立方體3D旋轉效果CSSS33D
- CSS3 文字立體翻轉效果CSSS3
- CSS3翻轉效果CSSS3
- css3實現的立方體3D旋轉效果CSSS33D
- css3立方體效果程式碼例項CSSS3
- css3實現動態摺疊生成立方體旋轉效果CSSS3
- CSS3前後和左右翻轉效果CSSS3
- CSS3前後左後翻轉效果CSSS3
- css3 3D 深度翻轉效果案例CSSS33D
- CSS3多面體旋轉效果CSSS3
- CSS3實現的立方體3D滾動效果程式碼例項CSSS33D
- CSS3實現的滑鼠懸浮廣告牌翻轉切換效果CSSS3
- css3實現的div上下左右翻轉效果程式碼例項CSSS3
- css3實現的書本立體翻頁效果程式碼例項CSSS3
- CSS3 旋轉魔方效果CSSS3
- js滑鼠拖動立方體3D運動效果JS3D
- CSS3圖片旋轉效果CSSS3
- CSS3星系旋轉效果代CSSS3
- css3實現滑鼠懸浮背景上下翻滾效果CSSS3
- css3實現的3D立體旋轉效果CSSS33D
- CSS3 3D翻轉動畫CSSS33D動畫
- 可以拖動立方體3D效果程式碼例項3D
- three.js 3D立方體效果程式碼例項JS3D
- CSS3旋轉載入等待效果CSSS3
- CSS3 圓環內部旋轉效果CSSS3
- CSS3地月星系旋轉效果CSSS3
- css3和js模擬翻頁效果程式碼例項CSSS3JS
- CSS3實現的div塊上下左右翻滾效果CSSS3
- CSS3 文字立體凸起效果CSSS3
- css3實現的方塊迴圈翻滾跳動效果CSSS3
- CSS3滑鼠懸浮div旋轉效果CSSS3
- css3實現環狀旋轉效果CSSS3
- CSS3旋轉風車效果程式碼CSSS3
- CSS3旋轉效果程式碼例項CSSS3
- CSS3 3d旋轉魔方效果CSSS33D
- CSS3 太陽系星球旋轉效果CSSS3
- CSS3旋轉大風車效果詳解CSSS3