CSS3-3D转换效果

末蓝、 2023-07-03 04:57 39阅读 0赞

CSS3 中是通过 `transform-style` 样式属性来实现 3D 立体效果的，为父元素设置了该属性其子元素就会具有 3D 效果，对应的属性值如下：

*  `flat` 所有子元素在2D平面呈现
 *  `preserve-3d` 所有子元素在3D空间中呈现

举个例子：

CSS:

.box { 
      width: 300px;
      height: 300px;
      margin: 20px auto;
      /* 过渡 */
      transition: transform 1s;
      /* 通过该属性可以给其子元素设置真正的 3D 立体效果 */
      transform-style: preserve-3d;
      /* 父盒子沿着 Y 轴旋转 */
      transform: rotateY(10deg);
      background: skyblue;
      border: 1px solid gray;
    }
    
    .section { 
      width: 200px;
      height: 200px;
      margin: 50px;
      /* 子盒子沿着 X 轴旋转 */
      transform: rotateX(20deg);
      background-color: #f00;
    }
    
    .box:hover { 
      /* 父盒子沿着 Y 轴旋转 */
      transform: rotateY(89deg);
    }

HTML:

![在这里插入图片描述][20200202173408721.gif]

实现一个正方体效果：

主要是通过父元素的四条边和前后面来构成正方体的六个面，再结合 `transform-style`、平移和旋转等方法就可以实现。

CSS:

* { 
      margin: 0;
      padding: 0;
    }
    
    /* 父元素 */
    .box { 
      position: relative;
      width: 200px;
      height: 200px;
      margin: 100px auto;
      font-size: 60px;
      text-align: center;
      line-height: 200px;
      /* 设置过渡 */
      transition: transform 2s;
      /* 设置转换样式为 3D */
      transform-style: preserve-3d;
      transform: rotateX(15deg) rotateY(-48deg);
      border: 1px solid #000;
    }
    
    .box:hover { 
      /* 鼠标放上时让其旋转 */
      transform: rotateX(300deg) rotateY(300deg);
    }
    
    .box div { 
      position: absolute;
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      border: 1px solid #999;
    }
    
    /* 上 */
    .top { 
      background-color: rgb(135, 206, 235);
      /* 沿着 Y 轴向上平移 50%，再沿 X 轴旋转 90 度 */
      transform: translateY(-50%) rotateX(90deg);
    }
    /* 下 */
    .bottom { 
      background-color: rgb(0, 128, 0);
      /* 沿着 Y 轴向下平移 50%，再沿着 X 轴旋转 -90 度 */
      transform: translateY(50%) rotateX(-90deg);
    }
    /* 左 */
    .left { 
      background-color: rgb(0, 0, 255);
      /* 沿着 X 轴向左平移 50%，再沿着 Y 轴旋转 -90 度 */
      transform: translateX(-50%) rotateY(-90deg);
    }
    /* 右 */
    .right { 
      background-color: yellow;
      /* 沿着 X 向右平移 50%，再沿着 Y 轴旋转 90的 度 */
      transform: translateX(50%) rotateY(90deg);
    }
    /* 前 */
    .front { 
      background-color: rgb(255, 0, 0);
      /* 沿着 Z 轴向前平移 100 像素 */
      transform: translateZ(100px);
    }
    /* 后 */
    .back { 
      background-color: purple;
      /* 沿着 Z 轴向后平移 100 像素 */
      transform: translateZ(-100px);
    }

HTML:

![在这里插入图片描述][20200202202130174.gif]

[20200202173408721.gif]: https://img-blog.csdnimg.cn/20200202173408721.gif
[20200202202130174.gif]: https://img-blog.csdnimg.cn/20200202202130174.gif