css3旋转效果 照片墙

CSS3中提供了许多炫酷的旋转效果，我们可以利用这些效果来制作一个照片墙。

首先，我们需要先将照片设置成一个方格的形状，并将它们放置在容器中。

.photo{
    width:200px;
    height:200px;
}
.container{
    display:flex;
    flex-wrap:wrap;
    width:800px;
    height:600px;
}

接着，我们可以利用CSS3的旋转属性来制作旋转效果，下面是一段定义旋转效果的CSS代码。

.photo:hover{
    transform: rotateX(180deg);
    transition: all 1s ease-in-out;
}
    

这段代码的作用是，当鼠标悬停在照片上时，将照片绕着X轴旋转180度，并且加上1秒的过渡动画效果。

通过在每张照片上应用这种旋转效果，我们就可以实现一个炫酷的照片墙了。

最终的HTML代码和CSS代码如下所示。

div class="container">
    div class="photo">
    img src="1.jpg">
    /div>
    div class="photo">
    img src="2.jpg">
    /div>
    div class="photo">
    img src="3.jpg">
    /div>
    div class="photo">
    img src="4.jpg">
    /div>
    div class="photo">
    img src="5.jpg">
    /div>
    div class="photo">
    img src="6.jpg">
    /div>
    div class="photo">
    img src="7.jpg">
    /div>
    div class="photo">
    img src="8.jpg">
    /div>
    /div>
.container{
    display:flex;
    flex-wrap:wrap;
    width:800px;
    height:600px;
}
.photo{
    width:200px;
    height:200px;
    margin:10px;
    perspective:500px;
}
.photo:hover{
    transform: rotateX(180deg);
    transition: all 1s ease-in-out;
}
.photo img{
    width:100%;
    height:100%;
}
    

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！