欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

如何用html搭建一个3d立方体呢?

程序员文章站 2022-07-12 23:33:16
...
												3d立方体特效代码
	
transforn:变形属性    
在2d中的平面空间进行位置移动
transform:translate(参数1.参数2)参数1:在x轴移动距离    参数2:在y轴移动的距离
在2d空间进行旋转:
transform:rotate()
在2d空间进行缩放,倾斜:
缩放:transform:scale()
倾斜:transform:skew()

先创建一个div盒子设置好宽高背景颜色然后在写div中的6个子元素,然后给子元素添加宽高字体样式。
例如: <style>
    *{
        margin: 0;
        padding: 0;
    }
    .box{
        width: 400px;
        height: 400px;
        background: red;
        position: fixed;
        right: 0;left: 0;
        bottom: 0;top: 0;
        margin: auto;
    }
    .box div{
        width: 400px;
        height: 400px;
        text-align: center;
      line-height: 300px;
      font-size: 100px;
      font-weight: bolder;
      color: #fff;
      position: absolute;
      left: 0;top: 0;
    }
</style>
1
2
3
4
5
6
![在这里插入图片描述](https://img-blog.csdnimg.cn/20200229224212353.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3d6c3pxMTI1,size_16,color_FFFFFF,t_70) 然后在继续一个个的给添加度数。先移动后旋转。然后在制定关键帧。 例: .con1{ background: blue; transform-origin: right center; transform: rotatey(90deg); }
      .con2{
          background: purple;
          transform-origin: left center;
          transform:rotatey(-90deg)
      }
      .con3{
          background: orange;
          transform-origin: center top;
          transform:rotatex(90deg);

      }
      .con4{
          background: pink;
          transform-origin: center bottom;
          transform: rotatex(-90deg);
      }
      .con5{
          background: yellow;
          transform:translateZ(300px)
      }
      .con6{
          background: black;
          transform:rotatey(180deg)
      }
   @keyframes boxRotate{
    0%{
        transform: rotatex(0) rotatey(0);
    }
    25%{
        transform: rotatex(180deg) rotatey(180deg);
    }
    50%{
        transform: rotatex(0deg) rotatey(360deg);
    }
    75%{
        transform: rotatex(-180deg) rotatey(540deg);
    }
    100%{
        transform: rotatex(0) rotatey(720deg);
    }
   }
   在继续给父元素添加3d元素进去,
    transform-style: preserve-3d;
      transition: 1s;
      animation: boxRotate 10s linear infinite;
      在给子元素添加透明度方便观察
       opacity: 0.3;
       然后形成一个3d旋转立体方块。

如何用html搭建一个3d立方体呢?如何用html搭建一个3d立方体呢?