如何利用html3D想过实现正方体

3D 图形转换

transform-style：preserve-3d；主要是将二维转换为三维，通俗的将就是将一个平面转换成一个有立体感的事物，而它的默认值为2D平面内
backface-visibility：hidden；3D透视下，默认可以通过背面看到正面的内容，可根据需要设置不可见。
perspective：2000px；设置透视距离，即观察者距离平面【z=0】的距离，让元素行程透视效果，不允许负值；当元素定义perspective属性时，其子元素会获得透视效果，而不是元素本身。
注意：与perspective-origin属性一同使用该属性，这样能够改变3D元素的底部位置。
perspective-origin：top left；
使用方式transform-origin相似
取值：1.可以使用长度单位px，百分比等。
2.可以使用（top，left，right，bottom，center）
如果值只有一个使用方向，浏览器会自动判断该值是作用于X轴还是Y轴，另一个默认为center

如何实现一个3D旋转的平行四边体

这边就需要用到一些2D效果才能实现一个旋转的平行四边体
先给body里面放一组ul li标签，在 li 标签内放入div标签 并给其起个类名 box 并在box里添加六个p标签，代表四边体的六个面

<ul>
    <li>
        <div class="box">
            <p class="left">左面</p>
            <p class="front2">正面</p>
            <p class="right">右面</p>
            <p class="font">背面</p>
            <p class="top">上面</p>
            <p class="bom">下面</p>
        </div>
    </li>
</ul>

设置其样式

    *{
        margin: 0;
        padding: 0;
        list-style: none;
    }
    ul>li,.box,p:nth-child(6),
    ul>li,.box,p:nth-child(5),
    ul>li,.box,p:nth-child(4),
    ul>li,.box,p:nth-child(2){
        width: 400px;
        height: 200px;
    }
    ul>li,.box,p:nth-child(1),
    ul>li,.box,p:nth-child(3){
        width: 200px;
        height: 230px;
    }
    ul li{
        margin: 100px auto;
        border: 1px solid;
        perspective: 1000px;
        perspective-origin: top left;
        
    }
    .box{
        transform-style:preserve-3d;
        position: relative;
        transition: all 5s linear;
        
    }
    .box:hover{
        transform:rotateY(230deg) rotateX(300deg);
    }
    *设置正面的样式
    .front2{
        background-image: url(../新闻界面/素材/35be2e2fc92df7dd4f0eddceb66eb2cb7a76c7083790-zrdgbU_fw658.jpg);
        background-position: center;
        background-size: 400px 200px;
        position: absolute;
        transform: translateZ(100px) skewX(-30deg);

    }
    *设置左侧面的样式
    .left{
        background-image: url(../新闻界面/素材/20150701161302_LcyHC.jpg);
        background-position: center;
        background-size: 200px 230px;
        position: absolute;
        transform: rotateY(-90deg) translateZ(109px) rotateX(30deg) translateY(-17px);
    }
    *设置右侧面的样式
    .right{
        background-image: url(../新闻界面/素材/20181203165534_uxbfy.jpg);
        background-position: center;
        background-size: 200px 230px;
        position: absolute;
        transform: rotateY(90deg) translateZ(291px) rotateX(-30deg) translateY(-17px);
    }
    *设置背面的样式
    .font{
        background-image: url(../新闻界面/素材/20191216020252_ftzfw.jpg);
        background-position: center;
        background-size: 400px 200px;
        position: absolute;
        transform: translateZ(-100px) skewX(-30deg) ;
    }
    *设置上面的样式
    .top{
        background-image: url(../新闻界面/素材/20191216020251_lgict.jpg);
        background-position: center;
        background-size: 400px 200px;
        position: absolute;
        transform: rotateX(90deg) translateZ(100px) translateX(57px);
    }
    *设置下面的样式
    .bom{
        background-image: url(../新闻界面/素材/20200104012057_xyfxa.jpg);
        background-position: center;
        background-size: 400px 200px;
        position: absolute;
        transform: rotateX(-90deg) translateZ(100px) translateX(-57px);
    }

以上就是实现3D平行四边形的效果，这里我为了让自己的平行四边体更好看用的都是背景图片，你们也可以用自己喜欢的背景图片实现，当然也可以用纯色实现一个转动的平行四边体！