标签：正方体 CSS3 background color 50px transform 0.6 HTML5 rgba
实现效果：
实现代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#aa{
margin: 100px auto;
width: 200px;
height: 200px;
transform-style: preserve-3d;
position: relative;
transform: rotateX(-15deg) rotateY(45deg);
animation: name 6s linear 100ms infinite;
}
.bb{
position: absolute;
width: 100px;
height: 100px;
left: 0;
right: 0;
background-color: rgba(232,222,45,0.6);
}
.qian{
transform: translateZ(50px);
background-color: rgba(23,22,4,0.6);
}
.hou{
transform: translateZ(-50px);
background-color: rgba(23,122,56,0.6);
}
.zuo{
transform: rotateY(270deg) translateZ(-50px);
background-color: rgba(223,122,74,0.6);
}
.you{
transform: rotateY(270deg) translateZ(50px);
background-color: rgba(13,22,254,0.6);
}
.shang{
transform: rotateX(270deg) translateZ(-50px);
background-color: rgba(223,12,144,0.9);
}
.xia{
transform: rotateX(270deg) translateZ(50px);
background-color: rgba(23,252,144,0.6);
}
@keyframes name{
from{ transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);}
to{ transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);}
}
</style>
</head>
<body>
<div id="aa">
<div class="bb qian"></div>
<div class="bb hou"></div>
<div class="bb zuo"></div>
<div class="bb you"></div>
<div class="bb shang"></div>
<div class="bb xia"></div>
</div>
</body>
</html>
标签：正方体,CSS3,background,color,50px,transform,0.6,HTML5,rgba 来源： https://blog.csdn.net/weixin_44893902/article/details/110240557
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。