[分享]css两张图3d转换

在CSS中，我们可以使用3D转换来创建许多有趣的视觉效果。其中一个常见的3D转换是将图像从2D转换为3D。下面是两个示例图像，可以使用CSS中的转换功能将它们转换为3D效果。 / Example 1 ...

在CSS中，我们可以使用3D转换来创建许多有趣的视觉效果。其中一个常见的3D转换是将图像从2D转换为3D。下面是两个示例图像，可以使用CSS中的转换功能将它们转换为3D效果。

/* Example 1 */
.box1 {
  perspective: 1000px;
  transform-style: preserve-3d;
}

.box1 img {
  position: absolute;
  top: 0;
  left: 0;
  transform: rotateY(40deg);
}

/* Example 2 */
.box2 {
  perspective: 1000px;
  transform-style: preserve-3d;
}

.box2 img {
  position: absolute;
  top: 0;
  left: 0;
  transform: rotateX(45deg) rotateY(45deg);
} 

在这些示例中，我们都使用了CSS属性“perspective”和“transform-style”，前者用于设置3D视图的深度，后者用于指定子元素沿着父元素的3D变换。然后，我们使用“transform”属性来指定图像的3D变换。在第一个示例中，我们使用“rotateY”来沿Y轴旋转图像，而在第二个示例中，我们先沿X轴旋转图像45度，然后再沿Y轴旋转45度。这些旋转操作都会造成图像的某些部分被遮挡，我们可以使用“translateZ”属性来调整图像的深度，以便让原本被遮挡的部分露出来。

总之，使用CSS的3D转换功能可以让我们创建出各种炫酷的3D效果，如果你还没有尝试过，赶快开始学习吧！