실제에 웹 프론트 엔드 항목 : 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)
}