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

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