关于css:css实现简单的3d效果

css 实现简略的 3d 成果

1. 开发环境 html,css
2. 电脑系统 windows 10 专业版
3. 在开发的过程中, 咱们依据需要可能会应用到 一些简略的 3d, 理解过 3d 的敌人都晓得, 要实现 3d 成果, 很麻烦, 须要学习很多的常识, 这些常识是很宏大的! 然而想要做好 3d, 须要有大量的积攒, 然而当咱们没有这些的时候, 想要做一些简略的 3d, 能够应用到 css (留神: 只能实现一些简略的 3d 成果)。办法如下:

<div class="juxing-r">
   <ul class="juxing7-r">
    <li>7</li>
    <li>7</li>
    <li>7</li>
    <li>7</li>
    <li>7</li>
    <li>7</li>
   </ul>
 </div>
 

4.css 代码如下:

.juxing7-r{
    /*width: 100%;*/
    width: 50px;
    height: 50px;
    /*height: 80%;*/
    box-sizing: border-box;
    position: relative;
    transform-style: preserve-3d;
  }

  .juxing7-r li {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    border: 1px solid #46B8DA;
  }

  .juxing7-r li:nth-of-type(1) {transform: rotateY(0deg) translateZ(25px);
    /* background-color: rgb(255, 118, 19); */
    background-color: red;
  }

  .juxing7-r li:nth-of-type(2) {transform: rotateY(90deg) translateZ(25px);
    /*background-color: rgb(231, 78, 72);*/
    background-color: yellow;
  }

  .juxing7-r li:nth-of-type(3) {transform: rotateX(90deg) translateZ(25px);
    /*background-color: rgb(75, 165, 165);*/
    background-color: blue;

  }

  .juxing7-r li:nth-of-type(4) {transform: rotateX(0deg) translateZ(0px);
    background-color: rgb(129, 182, 62);
    /*background-color: black;*/
  }

  .juxing7-r li:nth-of-type(5) {transform: rotateX(-90deg) translateZ(25px);
    background-color: rgb(129, 182, 62);
    /*background-color: black;*/
  }

  .juxing7-r li:nth-of-type(6) {transform: rotateY(90deg) translateZ(-25px);
    background-color: rgb(244, 208, 114);
    /*background-color: black;*/
  }

  .juxing7-r{
    position: absolute;
    left: 10%;
    top: 0%;
  }

// 在浏览器中, 你能够看到生成对应的立方体.
// 本期的教程到了这里就完结啦! 是不是很简略! 让咱们一起致力走向巅峰!