CSS3轻量级立体式3D旋转动画效果
CSS3轻量级立体式3D旋转动画效果
点击查看演示
一、案例分析
1、立体式3D旋转--perspective: 1200px;结合transform-style: preserve-3d;一起使用。。
2、鼠标悬停到图片上，沿着Y轴旋转180度--transform: rotateY(0.5turn);。
3、图片反正，背景逐渐变成变色，文字清晰。
4、使用伪类.flip-3d figure::after，在图片的下方，制作一个压扁的椭圆图形。
二、HTML源代码
<div class="wrap"> <div class="flip-3d"> <figure> <img src="img/1.jpg" alt=""> <figcaption>tom</figcaption> </figure> </div> <div class="flip-3d"> <figure> <img src="img/2.jpg" alt=""> <figcaption>mouse</figcaption> </figure> </div> <div class="flip-3d"> <figure> <img src="img/3.jpg" alt=""> <figcaption>elva</figcaption> </figure> </div> </div>
三、CSS源代码
<style>
*{
margin: 0;
padding: 0;
}
body{
background: #efefef;
}
.wrap{
width: 1000px;
overflow: hidden;
margin: 0 auto;
}
.flip-3d{
width: 33%;
float: left;
perspective: 1200px;
}
.flip-3d figure{
font-size: 1.6rem;
margin: 25px;
position: relative;
transform-style: preserve-3d;
transition: 1s transform;
}
.flip-3d:hover figure{
transform: rotateY(0.5turn);
}
.flip-3d figure img{
width: 100%;
height: auto;
}
.flip-3d figure figcaption{
width: 100%;
height: 100%;
background: rgba(255,255,255,0.9);
position: absolute;
top: 0;
text-align: center;
padding-top: 45%;
transform: rotateY(0.5turn) translateZ(1px);
opacity: 0.6;
transition: 1s 0.5s opacity;
}
.flip-3d:hover figure figcaption{
opacity: 1;
}
.flip-3d figure::after{
content: '';
display: block;
width: 100%;
height: 8vw;
transform: rotateX(90deg);
background-image: radial-gradient(ellipse closest-side, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0) 100%);
}
@media screen and (max-width:800px) {
.flip-3d{
perspective-origin: center top;
}
.flip-3d figure{
width: 50%;
margin: 0 auto;
margin-bottom: 12vw;
}
.flip-3d figure figcaption{
font-size: 0.8rem;
}
.flip-3d figure:last-child{
display: none;
}
}
</style>
