css实现页面翻转 正反两面展示不同的内容

标签：red   form   旋转   bottom   out   demo   front   rate   ati   

要点：

1 页面旋转使用css3的rorateY(180deg) 实现页面的翻转

2 使用backface-visibility 实现正面元素翻转之后背面不可见，显示出反面的元素

demo：

html

<div>

　　<div class="oppsite">反面的内容</div>

　　<div class="front">正面的内容</div>

</div>

css

div{

　　width:200px;

　　height:200px;

　　margin:20px auto;

　　position:relative;

}

div .front,div .oppsite{

　　position:absolute;

　　left:0;

　　top:0;

　　right:0,

　　bottom:0;

　　background-color:blue;

　　transition:all 2s ease-in -out;

}

div .front{

　　background-color:red;

}

div:hover .front,div:hover .oppsite{

　　transform:rorateY(180deg)

}

css实现页面翻转 正反两面展示不同的内容

标签：red   form   旋转   bottom   out   demo   front   rate   ati   

原文地址：https://www.cnblogs.com/xiaofenguo/p/10834200.html