一、如何编辑出一个正方体
上后下前的顺序编写，最后在写左右
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>D184_3DTransformCubetitle><style>*{margin:0;padding:0;}ul{width: 200px;height: 200px;border: 1px solid black;box-sizing:border-box;margin:100px auto;position:relative;transform: rotateY(0deg) rotateX(0deg);transform-style: preserve-3d;/*转换成一个3D的面*/}li{list-style: none;width: 200px;height: 200px;text-align:center;line-height:200px;font-size:60px;position:absolute;}ul li:nth-child(1){background-color: red;transform:rotateX(90deg) translateZ(100px) ;}ul li:nth-child(2){background-color: blue;transform:rotateX(180deg) translateZ(100px) ;}ul li:nth-child(3){background-color: purple;transform:rotateX(270deg) translateZ(100px) ;}ul li:nth-child(4){background-color: pink;transform:rotateX(360deg) translateZ(100px) ;}ul li:nth-child(5){background-color: white;}ul li:nth-child(6){background-color: yellow;}style>head><body><ul>这里的六个li代表的就是正方体的六个面--><li>1li><li>2li><li>3li><li>4li><li>5li><li>6li>ul>body>html>
二、如何编辑出一个长方体
要点：我们可以在正方体的基础上，利用属性tranform:scale(水平倍数，垂直倍数)的方式进行扩展，直接举个例子
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>D185_Cubiodtitle><style>*{margin:0;padding:0;}ul{width: 200px;height: 200px;border: 1px solid black;box-sizing:border-box;margin:100px auto;position:relative;transform: rotateY(0deg) rotateX(0deg);transform-style: preserve-3d;/*转换成一个3D的面*/}li{list-style: none;width: 200px;height: 200px;text-align:center;line-height:200px;font-size:60px;position:absolute;}ul li:nth-child(1){background-color: red;transform:translate(-100px) rotateY(-90deg) scale(1.5,1);}ul li:nth-child(2){background-color: blue;transform:translate(100px) rotateY(90deg) scale(1.5,1);}ul li:nth-child(3){background-color: purple;transform:translateY(100px) rotateX(-90deg) scale(1,1.5);}ul li:nth-child(4){background-color: pink;transform:translateY(-100px) rotateX(90deg) scale(1,1.5);}ul li:nth-child(5){background-color: white;transform:translateZ(150px) rotateX(0deg);}ul li:nth-child(6){background-color: yellow;transform:translateZ(-150px) rotateX(-180deg);}style>head><body><ul>这里的六个li代表的就是正方体的六个面--><li>1li><li>2li><li>3li><li>4li><li>5li><li>6li>ul>body>html>
三、源码：
D184_3DTransformCube.html
D185_Cubiod.html
地址:
https://github.com/ruigege66/HTML_learning/blob/master/D184_3DTransformCube.html
https://github.com/ruigege66/HTML_learning/blob/master/D185_Cubiod.html
2.CSDN：https://blog.csdn.net/weixin_44630050
3.博客园：https://www.cnblogs.com/ruigege0000/
Copyright © 2004-2024 Ynicp.com 版权所有 法律顾问:建纬(昆明)律师事务所 昆明市网翼通科技有限公司 滇ICP备08002592号-4
