css3 3d翻转效果

标签：style   io   os   for   div   sp   cti   on   c   

<div class="demo">
       <span class="front">
            aaaaaaaaaaaaaa
       </span>
       <span class="behind">
           bbbbbbb
       </span>
</div>

.demo{
display: block;
cursor: pointer;
position: relative;
width:190px;/*限定3d展示范围*/
height: 243px;
/*-webkit-perspective: 200px;*/
border: 1px solid #f00;
}
.demo span{
display: block;
/*指定该元素的具有3d翻转效果*/
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
/*指定元素3d反面是否可见*/
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
-o-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}
.demo .front{
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
-ms-transform: rotateX(0deg);
-o-transform: rotateX(0deg);
transform: rotateX(0deg);
}
.demo .front.hover{
-webkit-transform: rotateX(180deg);
-moz-transform: rotateX(180deg);
-ms-transform: rotateX(180deg);
-o-transform: rotateX(180deg);
transform: rotateX(180deg);
}
.demo .behind{
/*默认该层就是反面，并且不可见*/
position: absolute;left: 0;top: 0;
display: table;
cursor: text;
width: 100%;
height: 100%;
background: #00a3cf;
-webkit-transform: rotateX(180deg);
-moz-transform: rotateX(180deg);
-ms-transform: rotateX(180deg);
-o-transform: rotateX(180deg);
transform: rotateX(180deg);
display: none\9;
}

.demo .behind.hover{
-webkit-transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
-ms-transform: rotateX(0deg);
-o-transform: rotateX(0deg);
transform: rotateX(0deg);
}

css3 3d翻转效果

标签：style   io   os   for   div   sp   cti   on   c   

原文地址：http://www.cnblogs.com/xiaotaiyang/p/3991316.html