css 图片3d旋转效果图

CSS3是一项新的技术，可以为我们的网站添加许多惊艳的动画和效果。其中一种常用的效果是3D旋转效果图，它可以使图片和文字在页面中呈现出立体效果。

.Box {
    position: relative;
    width: 300px;
    height: 300px;
    margin: 50px auto;
    perspective: 800px; /* 定义视距距离 */
}
.Box img {
    width: 100%;
    height: 100%;
    position: absolute;
    transform-style: preserve-3d;
    transition: transform .8s;
}
.Box:hover img {
    transform: rotateY(180deg);
}

上述代码中，我们首先给需要旋转的图片的父容器设置了一个透视距离perspective，这个值越大，图片离观察者的距离就越远，3D效果就越明显。接着，为图片设置了绝对定位，并添加了preserve-3d属性，这个属性可以使所有子元素沿着z轴进行旋转，创造出3D效果。最后，使用了transform属性来实现当鼠标悬停到图片上时自动旋转的效果。

通过使用CSS3 3D旋转效果图，我们可以为我们的网站注入更多的创意设计，使得用户体验更加丰富多彩。