码迷,mamicode.com
首页 > Web开发 > 详细

CSS3 3D翻转动画

时间:2017-12-29 16:58:21      阅读:222      评论:0      收藏:0      [点我收藏+]

标签:效果   block   cti   三维空间   ima   containe   三维   res   width   

技术分享图片

CSS3动画属性:
transform(变换):大小、位置、颜色、变形等状态的变化
transition(过渡):初始状态过渡到结束状态这个过程中产生的动画
animation(动画):定义关键帧动画

CSS3可以实现多种动画效果,下面说的是CSS3实现一个3D翻转的动画效果。

<div class="container">
   <div class="wrapHover>
        <div class="wrap">
           <div class="font">
               <img src="img/01.png">
           </div>
           <div class="back">
               <img src="img/02.png">
           </div>
        </div>
    </div>
</div>
.container{
    perspective: 800px; 
    perspective-origin: 50% 50%;
}    //创建3D环境
.wrapHover{
    width: 200px; 
    height: 200px; 
    overflow: hidden;
}
.wrap{
    position: relative; 
    backface-visibility: hidden;  
    transform-style: preserve-3d;
}
.wrap div{
   position: absolute; 
   top: 0; 
   left: 0;
}
.font{
    backface-visibility: hidden;
}
.back{
    backface-visibility: hidden; 
    transform: rotateY(180deg);
}
.wrapHover:hover .wrap{
    transform: rotateY(180deg);
}

属性介绍:
perspective 指定观察者与z=0平面的距离,perspective-origin 指定透视点坐标值,首先使用 perspective 和 perspective-origin 属性创建一个3D环境;
transform-style 指定某元素的子元素是否位于三维空间内;backface-visibility 指定元素背面面向用户时是否可见,该属性不可继承。

 

CSS3 3D翻转动画

标签:效果   block   cti   三维空间   ima   containe   三维   res   width   

原文地址:https://www.cnblogs.com/annieSun/p/8145190.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!