CSS3 正方体
Posted tylz
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS3 正方体相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div class="par">
<div class="cld1">1</div>
<div class="cld2">2</div>
<div class="cld3">3</div>
<div class="cld4">4</div>
<div class="cld5">5</div>
<div class="cld6">6</div>
</div>
</body>
<style type="text/css">
html,body{
margin:0;
height: 100%;
width: 100%;
}
.par{
/* display: flex;
justify-content:center;
align-items:center;*/
width: 100%;
height: 100%;
transform-style:preserve-3d;
animation:rotate 5s infinite alternate;
}
.par>div{
position: absolute;
width: 100px;
height: 100px;
}
.cld1{
background: red;
}
.cld2{
background: red;
transform:translateZ(100px);
}
.cld3{
background: yellow;
transform:rotateY(90deg) translateZ(50px) translateX(-50px);
}
.cld4{
background: yellow;
transform:rotateY(90deg) translateZ(-50px) translateX(-50px);
}
.cld5{
color: #fff;
background: #000;
transform:rotateX(90deg) translateZ(-50px) translateY(50px);
}
.cld6{
color: #fff;
background: #000;
transform:rotateX(90deg) translateZ(50px) translateY(50px);
}
@keyframes rotate {
0% {
transform:rotateY(0deg) rotateX(0deg);
}
100% {
transform:rotateY(360deg) rotateX(360deg);
}
}
</style>
</html>
以上是关于CSS3 正方体的主要内容，如果未能解决你的问题，请参考以下文章