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

ゞ浴缸里的玫瑰 2021-12-15 06:45 413阅读 0赞

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

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

*  首先想要制作 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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTI4OTA2Nw_size_16_color_FFFFFF_t_70]: /images/20211214/7eed83216d184683ae486b1fdd128900.png

发表评论取消回复

表情：

评论列表（有 0 条评论，413人围观）

还没有评论，来说两句吧...

相关阅读

相关如何使用CSS实现一个3D旋转效果？

聚沙成塔·每天进步一点点 ⭐ 专栏简介 ⭐ 3D效果实现 ⭐ 写在最后 -------------------- ⭐ 专栏简介前端入门之旅：

╰+哭是因爲堅強的太久メ/ 2023年10月15日 09:28/ 0 赞/ 17 阅读

相关 3D移动translate3d（CSS3）

3D移动translate3d（CSS3） <!DOCTYPE html> <html lang="en"> <head>

叁歲伎倆/ 2023年10月03日 13:39/ 0 赞/ 45 阅读

相关学习CSS3 3D转换，制作一个3D立方体

要想实现3D的效果，其实非常简单，只需指定一个元素为容器并设置transform-style：preserve-3d，那么它的后代元素便会有3D效果。不过有很多需

谁借莪１个温暖的怀抱￠/ 2022年07月15日 00:20/ 0 赞/ 347 阅读

相关学习CSS3 3D转换，制作一个3D立方体

要想实现3D的效果，其实非常简单，只需指定一个元素为容器并设置transform-style：preserve-3d，那么它的后代元素便会有3D效果。不过有很多需

左手的ㄟ右手/ 2022年07月15日 00:20/ 0 赞/ 305 阅读

相关使用CSS3绘制一个简易的3D相册

使用CSS3绘制一个简易的3D相册，先来看一下完成的静态效果图，： ![3D相册][3D] [点击查看完成效果][Link 1] 关于CSS3中的transform3D

短命女/ 2022年07月14日 08:26/ 0 赞/ 212 阅读

相关旋转的3d正方形

![这里写图片描述][70] <!doctype html> <html lang="en"> <head> <meta charse

Myth丶恋晨/ 2022年05月28日 02:46/ 0 赞/ 270 阅读

相关 CSS3 3D 转换

rotateX() 方法通过 rotateX() 方法，元素围绕其 X 轴以给定的度数进行旋转。 div { transfo

我就是我/ 2022年03月18日 13:26/ 0 赞/ 288 阅读

相关 css3的3D变形

一、坐标系　　1、是我们熟悉的右手坐标系：伸出右手，让拇指和食指成L形，大拇指向为右，食指向上，中指指向前方，这样，拇指、食指、中指的指向分别是X、Y、Z轴的正方向。　

桃扇骨/ 2022年01月10日 04:11/ 0 赞/ 313 阅读

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

使用css3的3D制作一个正方形首先我们来看效果 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10

ゞ浴缸里的玫瑰/ 2021年12月15日 06:45/ 0 赞/ 414 阅读

相关 CSS3 transform动画 3D旋转立体正方形

CSS3 transform动画 3D旋转立体正方形在一个大的div里放置六个小div，分别向前后，向左右，向上下移动相等位置，再将平面div旋转，添加animatio

「爱情、让人受尽委屈。」/ 2021年07月25日 13:57/ 0 赞/ 675 阅读