本物のWebフロントエンドエントリ：CSSのページ反転は異なる表示内容の長所と短所を実現します

ハイライト：

rorateYのCSS3を使用して1ページの回転（原稿180°）ページ反転を実装

図2は、素子の裏面が表示されていない反転後の正背面視認性を達成するために使用される、要素の裏側を示しています

デモ：

HTML

<div>
　　<div>反面的内容</div>
　　<div>正面的内容</div>
</div>

CSS

web前端开发学习Q-q-u-n： 767273102 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法（详细的前端项目实战教学视频）
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)
}