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

Posted 2021-11-28 xiaofenguo

要点：

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)

}