CSS3D 实例

CSS3D 是一个强大的工具，可以让我们在网页中实现 3D 效果。以下是一些 CSS3D 的实例。

3D 立方体

我们可以通过 CSS3D 创建一个 3D 立方体，并且可以旋转它。

<div id="cube"></div>

<style>
  #cube {
    width: 100px;
    height: 100px;
    transform-style: preserve-3d;
    animation: rotateCube 10s infinite linear;
  }

  @keyframes rotateCube {
    from {
      transform: rotateX(0deg) rotateY(0deg);
    }
    to {
      transform: rotateX(360deg) rotateY(360deg);
    }
  }

  .face {
    width: 100%;
    height: 100%;
    position: absolute;
    backface-visibility: hidden;
  }

  .front {
    background-color: red;
  }

  .back {
    background-color: blue;
    transform: rotateY(180deg);
  }

  .left {
    background-color: green;
    transform: rotateY(-90deg);
  }

  .right {
    background-color: yellow;
    transform: rotateY(90deg);
  }

  .top {
    background-color: purple;
    transform: rotateX(90deg);
  }

  .bottom {
    background-color: orange;
    transform: rotateX(-90deg);
  }
</style>

图片轮播

CSS3D 还可以用来创建图片轮播效果。

<div id="carousel"></div>

<style>
  #carousel {
    width: 300px;
    height: 200px;
    perspective: 1000px;
    position: relative;
  }

  .carousel-item {
    width: 100%;
    height: 100%;
    position: absolute;
    backface-visibility: hidden;
    transition: transform 1s;
  }

  .carousel-item:nth-child(1) {
    background-image: url('https://example.com/image1.jpg');
  }

  .carousel-item:nth-child(2) {
    background-image: url('https://example.com/image2.jpg');
    transform: translateZ(-200px);
  }

  .carousel-item:nth-child(3) {
    background-image: url('https://example.com/image3.jpg');
    transform: translateZ(-400px);
  }

  .carousel-item:hover {
    transform: translateZ(0px);
  }
</style>

更多关于 CSS3D 的内容，请访问CSS3D 教程。

<center><img src="https://cloud-image.ullrai.com/q/CSS3D_examples/" alt="CSS3D 实例"/></center>