css3D旋转立方体

gif图,请耐心等待加载

3D旋转效果主要使用了CSS3 transform 属性

首先我们先完善布局

要想完成一个立方体,首先我们要有一个参考界面,也就是立方体的核心

如图,标注区域就是我们的核心区,立方体的每个界面都是以核心为参考系

image.png

核心区域只需要一个简单的平面就可以,记得加上transform-style: preserve-3d;子元素将保留其 3D 位置。

.box{
     position: absolute;
     height: 200px;
     width: 200px;
     top: 50%;
     left: 50%;
     margin-left: -100px;
     margin-top: -100px;
     transform-style: preserve-3d;
     background: #eee;
     box-sizing: border-box;
}        

核心区.png

接下来将定位六个面位置,为了方便观察位置,我们给核心区一个默认旋转值transform: rotateX(45deg) rotateY(45deg);

然后是根据核心区定位第一个面

.box{
     position: absolute;
     height: 200px;
     width: 200px;
     top: 50%;
     left: 50%;
     margin-left: -100px;
     margin-top: -100px;
     transform-style: preserve-3d;
     background: #eee;
     box-sizing: border-box;
     transform: rotateX(45deg) rotateY(45deg);
}  
.box li{
            position: absolute;
            top: 0;
            left: 0;
            list-style: none;
            width: 200px;
            height: 200px;
        }
        
        .box li:nth-child(1){
            background: #159DE3;
            transform: translateX(-100px) rotateY(90deg)
        }

第一个面.png

translateX(-100px) rotateY(90deg)的意思是元素沿着X轴移动-100px,沿着 Y 轴的 3D 旋转90度
同理,与这个面对应的应该是元素沿着X轴移动100px,沿着 Y 轴的 3D 旋转90度
translateX(100px) rotateY(90deg)

image.png

红色被核心区挡住了一部分,放心不影响
举一反三,我们将其他界面完成

html,body {width: 100%;height: 100%;}
        * {margin: 0;padding: 0;}
        .box{
            position: absolute;
            height: 200px;
            width: 200px;
            top: 50%;
            left: 50%;
            margin-left: -100px;
            margin-top: -100px;
            transform-style: preserve-3d;
            background: #eee;
            box-sizing: border-box;
            transform: rotateX(45deg) rotateY(45deg);
        }
        .box li{
            position: absolute;
            top: 0;
            left: 0;
            list-style: none;
            width: 200px;
            height: 200px;
            opacity: 0.5;
        }
        
        .box li:nth-child(1){
            background: #159DE3;
            transform: translateX(-100px) rotateY(90deg)
        }
         .box li:nth-child(2){
            background: red;
            transform: translateX(100px) rotateY(-90deg)
        }
        
        .box li:nth-child(3){
            background: orange;
            transform: translateZ(100px) rotateY(0deg)
        }
        .box li:nth-child(4){
            background: green;
            transform: translateZ(-100px) rotateY(0deg)
        }
        
        .box li:nth-child(5){
            background: pink;
            transform: translateY(-100px) rotateX(90deg);
        }
        .box li:nth-child(6){
            background: blue;
            transform: translateY(100px) rotateX(90deg);
        }

image.png

看上去不太美观,我们把核心区颜色去掉,核心区只是一个参考系的作用,没必要显示出来

image.png

哦了,布局已经完成,接下来让立方体跟着鼠标旋转
前面已经说过,所有的面都是根据核心区去定位的,所以旋转立方体其实就是旋转核心区
我们已经将核心区的旋转默认值设置为transform: rotateX(45deg) rotateY(45deg);

打开控制台我们来修改旋转值来看下效果

gif图片,耐心等待加载

所以只要修改核心区的旋转,其他几个面也会相应的根据核心区做出位置改变

根据鼠标在body上的位置,来等比旋转立方体

点赞.jpg