css---3d翻转

简单的一个3d翻转的动画特效：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.main-img{width: 800px; margin: 50px auto 0; overflow: hidden;}
.main-img .img-item{width: 180px; height: 250px; margin: 0 30px 30px 0; float: left;}
.main-img .img-item .img-box{width: 180px; height: 250px;}
.main-img .img-item .img-box img{width: 180px; height: 250px;}
/**/
.main-img .img-item.item1{}
.main-img .img-item.item1 .img-box{transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;}
.main-img .img-item.item1:hover .img-box{transform: perspective(1000px) rotateY(45deg);}
/**/
.main-img .img-item.item2{position: relative;}
.main-img .img-item.item2 .img-box{backface-visibility: hidden; position: absolute; top: 0; left: 0; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;}
.main-img .img-item.item2 .img-box:last-child{z-index: 2;}
.main-img .img-item.item2 .img-box:first-child{transform: rotateY(180deg);}
.main-img .img-item.item2:hover .img-box:first-child{transform: rotateY(0deg);}
.main-img .img-item.item2:hover .img-box:last-child{transform: rotateY(-180deg);}
/**/
.flip-container{ perspective: 1000px; /* 设置透视点 */ }
.flipper{ width: 180px; height: 250px;
  transition: 0.6s; /* 设置过渡特效 */
  transform-style: preserve-3d; /* 开启3D环境 */
  position: relative;
}
.front,.back{width: 180px; height: 250px; backface-visibility: hidden; position: absolute; top: 0; left: 0; transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out;}
.front img,.back img{width: 180px; height: 250px;}
.front{z-index: 2;}
.back{transform: roateY(180deg);}
.flipper:hover .front{transform: rotateY(-180deg);}
.flipper:hover .back{transform: rotateY(0deg);}

</style>
</head>
<body>

<div class="main-img">
    <div class="img-item item1">
        <div class="img-box"><img src="images/111.jpg"></div>
    </div>
    <div class="img-item item2">
        <div class="img-box"><img src="images/111.jpg"></div>
        <div class="img-box"><img src="images/222.jpg"></div>
    </div>
</div>

<div class="flip-container">
    <div class="flipper">
        <div class="front"><img src="images/111.jpg"></div>
        <div class="back"><img src="images/222.jpg"></div>
    </div>
</div>

</body>
</html>

打完收工！

posted @ 2023-09-06 10:12  帅到要去报警  阅读(77)  评论(0)  编辑  收藏  举报