css3實現的div上下左右翻轉效果程式碼例項
分享一段程式碼例項,它利用css3實現了div元素上下左右翻轉效果。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> .spinner { width: 60px; height: 60px; background-color: #67CF22; margin: 100px auto; -webkit-animation: rotateplane 1.2s infinite ease-in-out; animation: rotateplane 1.2s infinite ease-in-out; } @-webkit-keyframes rotateplane { 0% { -webkit-transform: perspective(120px); } 50% { -webkit-transform: perspective(120px) rotateY(180deg); } 100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg); } } @keyframes rotateplane { 0% { transform: perspective(120px) rotateX(0deg) rotateY(0deg); -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg); } 50% { transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); } 100% { transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); } } </style> </head> <body> <div class="spinner"></div> </body> </html>
相關文章
- CSS3實現的div塊上下左右翻滾效果CSSS3
- div前後翻轉效果程式碼例項
- CSS3實現的div圓角效果程式碼例項CSSS3
- CSS3實現的div陰影效果程式碼例項CSSS3
- css3實現div邊框陰影效果程式碼例項CSSS3
- css3實現的旋轉魔方效果程式碼例項CSSS3
- css實現圖片上下左右居中效果程式碼例項CSS
- css3實現的書本立體翻頁效果程式碼例項CSSS3
- js實現的div拖動效果例項程式碼JS
- css實現的div垂直居中效果程式碼例項CSS
- css3實現的折角效果程式碼例項CSSS3
- javascript實現的div塊閃爍效果程式碼例項JavaScript
- css3實現旋轉的太極圖效果程式碼例項CSSS3
- 滑鼠懸浮div實現旋轉縮放效果程式碼例項
- css3實現的打折卡效果程式碼例項CSSS3
- CSS3 實現的鐘表效果程式碼例項CSSS3
- css3實現的毛玻璃效果程式碼例項CSSS3
- css3實現的打字機效果程式碼例項CSSS3
- css3實現的圓角效果程式碼例項CSSS3
- css3實現的氣泡效果程式碼例項CSSS3
- CSS實現div層半透明效果程式碼例項CSS
- CSS3 div從左側滑入效果程式碼例項CSSS3
- CSS3旋轉效果程式碼例項CSSS3
- css3實現的文字下滑出現效果程式碼例項CSSS3
- css3實現的斑馬紋效果程式碼例項CSSS3
- css3實現的動態大白效果程式碼例項CSSS3
- css3實現的文字陰影效果程式碼例項CSSS3
- css3實現的多啦a夢效果程式碼例項CSSS3
- css實現div全屏水平垂直居中效果程式碼例項CSS
- js點選div實現閃爍效果程式碼例項JS
- jQuery和css3實現的開關效果程式碼例項jQueryCSSS3
- css3實現的邊框陰影效果程式碼例項CSSS3
- css3實現的動物頭像效果程式碼例項CSSS3
- css3實現的皮球上下彈動效果程式碼例項CSSS3
- css3實現div元素垂直水平居中程式碼例項CSSS3
- css3和js模擬翻頁效果程式碼例項CSSS3JS
- css實現的div旋轉簡單程式碼例項CSS
- css3實現button按鈕美化效果程式碼例項CSSS3