我要评论一、如何编辑出一个正方体
上后下前的顺序编写，最后在写左右
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>d184_3dtransformcube</title>
<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>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</body>
</html>
二、如何编辑出一个长方体
要点：我们可以在正方体的基础上，利用属性tranform:scale(水平倍数，垂直倍数)的方式进行扩展，直接举个例子
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>d185_cubiod</title>
<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>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</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/
4.欢迎关注微信公众号：傅里叶变换，个人账号，仅用于技术交流，后台回复“礼包”获取java大数据学习视频礼包
您可能感兴趣的文章:
如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！
网友评论