CSS3特效之翻转
2017-01-19 22:16
239 查看
鼠标悬停,图片翻转
<!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title> <style> #container:before{ content:""; display:table; } #container{ width:250px; height:250px; border-radius:50%; background:-webkit-radial-gradient(circle,#FFFFFF,#F4F4F4,#D3D3D3); margin:auto; margin-top:100px; } #wrap{ -webkit-perspective:500px; width:200px; height:200px; border-radius:50%; background-color:#fff; margin:auto; margin-top:25px; } #images{ -webkit-transform-style:preserve-3d; -webkit-transition:1.5s; position:relative; } #wrap:hover #images{ -webkit-transform:rotateY(180deg); } #images>div{ position: absolute; -webkit-backface-visibility:hidden; } div.back { -webkit-transform:rotateY(180deg); } img{ width:200px; height:200px; border-radius:50%; } </style> </head> <body> <div id="container"> <div id="wrap"> <div id="images"> <div class="front"> <img src="images/huan.jpg"/> </div> <div class="back"> <img src="images/love.jpg"> </div> </div> </div> </div> </body> </html>
相关文章推荐
- CSS3和js炫酷点击按钮3D翻转动画特效
- css3实现3D立体翻转导航特效
- 一款基于css3的散子3D翻转特效
- css3实现3D色子翻转特效
- CSS3 + JavaScript原生 实现翻转特效
- CSS3和js炫酷点击按钮3D翻转动画特效
- [原创]纯CSS3打造的3D翻页翻转特效
- 基于css3的文字3D翻转特效
- 基于css3的文字3D翻转特效
- css3 翻转特效实例 翻扑克
- CSS3翻转特效;
- css3实现的翻转特效及tab切换功能
- 一款基于css3麻将筛子3D翻转特效的实例教程
- CSS3+HTML5特效2 - 翻转效果
- 文字 AnimatedOpeningType css3的文字3D翻转特效
- CSS3实现3D魔方翻转网页动画特效
- 一款基于css3的散子3D翻转特效
- 基于css3的3D立方体旋转特效
- 一款基于css3鼠标经过圆形旋转特效
- css3 翻牌(rotate) 以及翻转 导致边缘锯齿解决 方法