效果圖如下
代碼:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .box{ position: relative; height: 300px; width: 300px; margin: 200px auto; perspective:500; -webkit-perspective:500; } .box01{ background: #009688; width: 300px; height: 300px; transition: all 0.5s ease-in; -webkit-transition: all 0.5s ease-in; position: absolute; left: 0; top: 0; } .box:hover .box01{ transform: rotateY(-90deg); -webkit-transform: rotateY(-90deg); opacity: 0; } .box02{ background: red; width: 300px; height: 300px; transition: all 0.5s ease-in; -webkit-transition: all 0.5s ease-in; position: absolute; left: 0; top: 0; transform: rotateY(90deg); -webkit-transform: rotateY(90deg); opacity: 0; } .box:hover .box02{ transform: rotateY(0deg); -webkit-transform: rotateY(0deg); opacity: 1; } </style> </head> <body> <div class="box"> <div class="box01"> </div> <div class="box02"> </div> </div> </body> </html>
過渡旋轉使用的是rotate(),要有透視效果的屬性是perspective(就是近大遠小,圖片會變成梯形) ,perspective 加給父盒子
使用perspective-origin可以改變效果位置,默認值為50% 50%;
perspective 屬性定義 3D 元素距視圖的距離,以像素計。該屬性允許您改變 3D 元素查看 3D 元素的視圖。
當為元素定義 perspective 屬性時,其子元素會獲得透視效果,而不是元素本身。
注:目前瀏覽器都不支持 perspective 屬性。
Chrome 和 Safari 支持替代的 -webkit-perspective 屬性。