CSS3翻轉效果
分享一段程式碼例項,它實現了元素的3D翻轉效果。
提供了多種型別的翻轉,程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!doctype html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style type="text/css"> * { padding: 0; margin: 0; } .container { width: 90%; padding: 5%; height: 12rem; display: flex; justify-content: space-around; } .container > div { width: 10rem; height: 10rem; } img { width: 100%; height: 100%; } a { transition: all 1s ease; display: block; height: 100%; } span { color: #fff; } /*div1*/ .div1 span { display: none; height: 100%; background-color: blue; transform: rotateX(-180deg); } .a1:hover img { display: none; } .a1:hover span { display: block; } .a1:hover { transform: rotateX(180deg) scale(.7,.7 ); } /*div2*/ .div2 span { display: none; height: 100%; background-color: blue; transform: rotateY(-180deg); } .a2:hover img { display: none; } .a2:hover span { display: block; } .a2:hover { transform: rotateY(180deg) scale(.7,.7 ); } /*div3*/ .div3 { perspective: 1000px; } .div3 a { transform-style: preserve-3d; transition: all .5s ease; } .div3 span { display: block; height: 160px; background-color: blue; transform-origin: 50% 0; transform: rotateX(-90deg); margin-top: -8px; } .a3:hover { transform: rotateX(90deg) translate3d(0,-80px,80px); } /*div4*/ .div4 { perspective: 1000px; } .div4 a { transform-style: preserve-3d; transition: all .5s ease; } .div4 span { display: block; height: 160px; background-color: blue; transform-origin: 50% 100%; transform: translateY(-320px) rotateX(90deg); } .a4:hover { transform: rotateX(-90deg) translate3d(0,80px,80px); } /*div5*/ .div5 { perspective: 1000px; } .div5 a { transform-style: preserve-3d; transition: all .5s ease; } .div5 span { display: block; height: 160px; background-color: blue; transform-origin: 0 50%; transform: translate(100%,-100%) rotateY(90deg); margin-top: -3px; } .a5:hover { transform: rotateY(-90deg) translate3d(-60px,0,80px); } /*div5*/ .div6 { perspective: 1000px; } .div6 a { transform-style: preserve-3d; transition: all .5s ease; } .div6 span { display: block; height: 160px; background-color: blue; transform-origin: 100% 50%; transform: translate(-100%,-100%) rotateY(-90deg); margin-top: -3px; } .a6:hover { transform: rotateY(90deg) translate3d(60px,0,80px); } </style> </head> <body> <section class="container"> <div class="div1"> <a href="###" class="a1"> <img src="demo/CSS/img/100x100.png"> <span>軸向二維翻轉</span> </a> </div> <div class="div2"> <a href="###" class="a2"> <img src="demo/CSS/img/100x100.png"> <span>橫向向二維翻轉</span> </a> </div> <div class="div3"> <a href="###" class="a3"> <img src="demo/CSS/img/100x100.png"> <span>3D上翻轉</span> </a> </div> </section> <section class='container'> <div class="div4"> <a href="###" class="a4"> <img src="demo/CSS/img/100x100.png"> <span>3D下翻轉</span> </a> </div> <div class="div5"> <a href="###" class="a5"> <img src="demo/CSS/img/100x100.png"> <span>3D右翻轉</span> </a> </div> <div class="div6"> <a href="###" class="a6"> <img src="demo/CSS/img/100x100.png"> <span>3D左翻轉</span> </a> </div> </section> </body> </html>
相關文章
- CSS3 立方體翻轉效果CSSS3
- CSS3 文字立體翻轉效果CSSS3
- CSS3前後和左右翻轉效果CSSS3
- CSS3前後左後翻轉效果CSSS3
- css3 3D 深度翻轉效果案例CSSS33D
- CSS3實現的滑鼠懸浮廣告牌翻轉切換效果CSSS3
- css3實現的div上下左右翻轉效果程式碼例項CSSS3
- CSS3 旋轉魔方效果CSSS3
- CSS3圖片旋轉效果CSSS3
- CSS3多面體旋轉效果CSSS3
- CSS3星系旋轉效果代CSSS3
- css3實現滑鼠懸浮背景上下翻滾效果CSSS3
- CSS3 3D翻轉動畫CSSS33D動畫
- CSS3旋轉載入等待效果CSSS3
- CSS3 圓環內部旋轉效果CSSS3
- CSS3地月星系旋轉效果CSSS3
- css3和js模擬翻頁效果程式碼例項CSSS3JS
- CSS3實現的div塊上下左右翻滾效果CSSS3
- css3實現的方塊迴圈翻滾跳動效果CSSS3
- CSS3滑鼠懸浮div旋轉效果CSSS3
- css3實現環狀旋轉效果CSSS3
- CSS3旋轉風車效果程式碼CSSS3
- CSS3旋轉效果程式碼例項CSSS3
- CSS3 3d旋轉魔方效果CSSS33D
- CSS3 太陽系星球旋轉效果CSSS3
- CSS3旋轉大風車效果詳解CSSS3
- CSS3扇形旋轉效果詳解CSSS3
- css3實現的旋轉的陀螺效果CSSS3
- css3點狀旋轉載入等待效果CSSS3
- CSS3邊框旋轉動畫實現效果CSSS3動畫
- CSS3實現的頁面反轉效果CSSS3
- CSS3圓形旋轉變大動畫效果CSSS3動畫
- css3實現的立方體旋轉效果CSSS3
- CSS3花瓣狀360度不停旋轉效果CSSS3
- CSS3滑鼠懸浮圖片前後翻轉CSSS3
- div前後翻轉效果程式碼例項
- 滑鼠懸浮圖片實現翻轉效果
- CSS3象棋效果CSSS3