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

本文介绍如何使用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>
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值