使用css3的3D制作一个正方形

最新推荐文章于 2024-08-26 16:26:38 发布

jared.wang

最新推荐文章于 2024-08-26 16:26:38 发布

阅读量3.9k

点赞数 3

CC 4.0 BY-SA版权

分类专栏：前端文章标签： 3d 立体正方形

本文链接：https://blog.youkuaiyun.com/weixin_45289067/article/details/94629292

前端专栏收录该内容

26 篇文章

订阅专栏

本文介绍如何使用CSS3的transform-style属性和transform函数创建一个3D立方体效果。通过定位和旋转子元素，可以实现一个由六个面组成的立体正方形，每个面都可以设置不同的背景图片，形成丰富的视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用css3的3D制作一个正方形

首先我们来看效果
在这里插入图片描述

首先想要制作 3D的效果最重要的是 css3 中的 transfom-style 属性, 它有2个属性
1. flat : 正常的平铺效果,
2. preserve-3d : 将子元素转化为三维立体元素
接下来通过定位让所有的子元素都重叠在一起,并且通过transform 属性向 Y轴正方向移动正方形一半的距离
因为每个子元素都是立体元素, 最后只要通过rotate(2D旋转) 让每个li标签通过旋转变成正方形的每一个面就ok了

下面是代码, 有空就研究一下吧

<style>
    div {
      padding-top: 100px;
    }
    ul {
      width: 200px;
      height: 200px;
      padding-top: 100px;
      list-style: none;
      margin: 50px auto;
      padding: 0;
      position: relative;
      transform-style: preserve-3d; /*将子元素转为3D*/
      transition: all 5s linear;
      transform: rotateX(45deg) rotateY(45deg); /*让ul整体向下转45度,向右转45度*/
    }

    li {
      width: 200px;
      height: 200px;
      /* border-radius: 50%; */
      text-align: center;
      line-height: 200px;
      position: absolute; /*让所有的子元素都重叠在一起*/
      border: 1px solid #ccc;
      left: 0;
      right: 0;
    }

    li:nth-child(1) {
      transform: translateZ(100px); /*正面*/
      background: url('./image/lol1.jpg') 0 0 no-repeat;
      background-size: cover;
    }

    li:nth-child(2) {
      transform: rotateX(180deg) translateZ(100px);/*背面*/
      background: url('./image/lol2.jpg') 0 0 no-repeat;
      background-size: cover;

    }

    li:nth-child(3) {
      transform: rotateY(-90deg) translateZ(100px);/*右面*/
      background: url('./image/lol3.jpg') 0 0 no-repeat;
      background-size: cover;

    }

    li:nth-child(4) {
      transform: rotateY(90deg) translateZ(100px);/*左面*/
      background: url('./image/lol4.jpg') 0 0 no-repeat;
      background-size: cover;

    }

    li:nth-child(5) {
      transform: rotateX(90deg) translateZ(100px);/*下面*/
      background: url('./image/lol5.jpg') 0 0 no-repeat;
      background-size: cover;

    }

    li:nth-child(6) {
      transform: rotateX(-90deg) translateZ(100px); /*上面*/
      background: url('./image/lol6.jpg') 0 0 no-repeat;
      background-size: cover;

    }

    ul:hover {/*鼠标移动到盒子上就可以让正方体旋转起来了*/
      transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);
      background-size: 200px;
    }
  </style>
  <div>
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>