<!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 正方体
猜你喜欢
转载自www.cnblogs.com/tylz/p/10773394.html
今日推荐
周排行