关于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%;
  }

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