怀孕事项,修真之风流才子,剑舞江南官网
一、正方体
核心要点就是：使用3d转换模块，以及平移、旋转的在x、y、z轴上的应用
我要评论 <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);
}
ul li:nth-child(2){
background-color: blue;
transform:translate(100px) rotatey(90deg);/*复习了translate是左右平移,可指定按照哪个轴平移，比如transformy就是上下平移*/
}
ul li:nth-child(3){
background-color: purple;
transform:translatey(100px) rotatex(-90deg);
}
ul li:nth-child(4){
background-color: pink;
transform:translatey(-100px) rotatex(90deg);
}
ul li:nth-child(5){
background-color: white;
transform:translatez(100px) rotatex(0deg);
}
ul li:nth-child(6){
background-color: yellow;
transform:translatez(-100px) rotatex(-180deg);
}
.........省略代码..........
<ul>
<!--这里的六个li代表的就是正方体的六个面-->
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</body>
二、源码：
d183_cubeof3dtransformmodule.html
地址:
https://github.com/ruigege66/html_learning/blob/master/d183_cubeof3dtransformmodule.html
2.csdn：https://blog.csdn.net/weixin_44630050
3.博客园：https://www.cnblogs.com/ruigege0000/
4.欢迎关注微信公众号：傅里叶变换，个人账号，仅用于技术交流，后台回复“礼包”获取java大数据学习视频礼包
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复
css3 flex布局 justify-content:space-between 最后一行左对齐
网友评论