• 设为首页
  • 加入收藏
  • 我要投稿
  • 联系站长
  • 网站模板技术交流
当前位置:模板网首页 > 建站教程 > Div+Css >  css3翻转效果正文

css3翻转效果

作者:网页模板
类型:文章教程
点击次数:
发布时间:2019-05-03 01:25
分享到:
我爱模板网的一个项目需要用到反转效果,即正常情况下看到的是正面的缩略图,鼠标移动上去,就会翻转过去,看到反面简介、跳转按钮等。那么实现这种效果,可以简单分析下:
1、html需要有个父标签来提供定位依据,正反面肯定是两个子容器,这两个容器肯定定位在一起,并且一样大小。
2、两个子容器肯定要能够旋转,所以需要用到transformrotateY来实现,同时需要注意,必须加上backface-visibility: hidden,即背面不可见,不然正面翻转过来,你将看到正面的字或图翻转了180°,却并没有看到正面下面的背面。
3、两个自容器需要加上transition过度动画
4、上面已经实现了反转效果,但是没有近大远小的立体效果,需要给父容器加上视距,即perspective
5、最终代码如下:
<style type="text/css">
    .father{width: 200px; height: 400px; margin:auto; font-size:100px; line-height: 400px; text-align: center; position: relative; perspective: 600px;}
    .father div{position: absolute; top:0; left: 0; width: 100%; height: 100%; transition:all .4s ease-in-out; backface-visibility: hidden;}
    .front{background:#eee; color: #333; transform: rotateY(0); z-index: 1}
    .back{background:#333; color: #fff; transform: rotateY(-180deg); z-index: 2;}
    .father:hover .front{transform: rotateY(-180deg);}
    .father:hover .back{transform: rotateY(0);}
</style>
<div class="father">
    <div class="front">
        前
    </div>
    <div class="back">
        后
    </div>
</div>
(责任编辑:网页模板)
  • 本文标签:
  • css翻转
小技巧:图片自适应宽度和高度垂直居中
没有下一篇