标签：translateZ transform li html5 background 立方体 150px 3D
在学习h5时，3D的动画效果是初学者最喜欢钻磨的地方。下面有个立方体旋转案例，有助于理解运用animation和transform！
思路：
在容器中创建3D空间，把原本2d的块来进行
相应的旋转和位移，拼接成一个正方体。正方体旋转。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>3D</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
background: black;
overflow: hidden;
}
/*父容器添加3D空间*/
ul{
width: 300px;
height: 300px;
/*border: white 1px solid;*/
position: relative;
margin:150px auto;
/*定义3D空间*/
transform-style: preserve-3d;
/* 添加旋转动画 */
animation: box 20s linear infinite;
}
/*关键帧 */
@keyframes box{
from{
transform: rotate3d(0,0,0,0deg);
}
to{
transform: rotate3d(1,1,1,360deg);
}
}
li{
width: 300px;
height: 300px;
border: 1px solid yellow;
color: white;
list-style: none;
/*拼接*/
position: absolute;
/*圆角*/
border-radius:20% ;
opacity: 0.7;
/*阴影*/
box-shadow: 0px 0px 100px white;
}
/*正面：红色*/
li:nth-child(1){
background: red;
/*位移*/
transform: translateZ(150px);
}
/*左边：黄色*/
li:nth-child(2){
background: yellow;
transform: rotateY(-90deg) translateZ(150px) ;
}
/*右边：蓝色*/
li:nth-child(3){
background: deepskyblue;
transform: rotateY(90deg) translateZ(150px);
}
/*上边：绿色*/
li:nth-child(4){
background: greenyellow;
transform: rotateX(90deg) translateZ(150px);
}
/*下边*/
li:nth-child(5){
background: orangered;
transform: rotateX(-90deg) translateZ(150px);
}
/*后面*/
li:nth-child(6){
background: palevioletred;
transform: translateZ(-150px);
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
标签：translateZ,transform,li,html5,background,立方体,150px,3D 来源： https://www.cnblogs.com/rosy-clouds/p/14815471.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。