css 图片 3d旋转360

CSS中通过transform属性可以对元素进行旋转、缩放等操作。其中，我们可以通过3D旋转来让图片动态展示出360度的效果。

.rotate {
  width: 200px;
  height: 200px;
  margin: 50px auto 0;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 1s ease-in-out;
  animation: rotate 5s linear infinite;
}

.rotate:hover {
  transform: rotateY(180deg);
}

@keyframes rotate {
  0% {
    transform: rotateY(0);
  }
  50% {
    transform: rotateY(180deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}

.rotate .img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}

.rotate .img img {
  width: 100%;
  height: 100%;
  display: block;
}

在上述代码中，我们首先定义一个类名为.rotate的元素，设置其宽高、相对定位、保留元素原始中心点等属性。然后，在:hover事件触发时设置元素绕Y轴旋转180度，实现了一个简单的3D旋转。

此外，我们还引入了一个名为rotate的关键帧动画，通过控制元素的transform属性实现了一个从0度到360度的旋转效果。

最后，我们在.rotate元素中嵌入了一个子元素.img，并在其内部添加了一个img标签作为图片的展示元素，并设置其等比缩放、坐标轴保留等属性。

通过以上代码的操作，我们可以轻松实现一个基于CSS的图片3D旋转效果。