CSS高阶用法(二)3D(简易魔方)
2020-07-28 本文已影响0人
ZoranLee
效果图如下：
image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box div {
position: absolute; /*一定是absolute*/
height: 320px;
width: 320px;
/*background: rgba(255, 200, 100, 0.8);*/
text-align: center;
font-size: 130px;
background-position:50% 50%;
background-size: cover;
}
#box {
transform-style: preserve-3d;
perspective-origin: left;
transform: rotateX(-30deg) rotateY(-80deg);
height: 320px;
width: 320px;
animation: roate linear 20s infinite;
}
@keyframes roate {
from {
transform: rotateX(0) rotateY(0);
}
to {
transform: rotateX(360deg) rotateY(360deg);
}
}
#box .one {
-webkit-transform: translateZ(80px);
background-image: url("https://tva1.sinaimg.cn/bmiddle/0080xEK2gy1gh4nvebuhkj30u01407jv.jpg");
}
#box .two {
-webkit-transform: rotateX(-90deg) translateZ(80px);
background-image: url("https://tva1.sinaimg.cn/bmiddle/0080xEK2gy1gh4nvd23btj30u012ojx7.jpg");
}
#box .three {
-webkit-transform: rotateY(180deg) rotateX(90deg) translateZ(80px);
background-image: url("https://tva1.sinaimg.cn/bmiddle/0080xEK2gy1gh4nxvut9ij30u0190n01.jpg");
}
#box .four {
-webkit-transform: rotateY(270deg) translateZ(80px);
background-image: url("https://tva1.sinaimg.cn/bmiddle/0080xEK2gy1gh4nvdtq42j30u01fogu6.jpg");
}
#box .five {
-webkit-transform: rotateY(-180deg) rotateZ(90deg) translateZ(80px);
background-image: url("https://tva1.sinaimg.cn/bmiddle/0080xEK2gy1gh4nve3ekbj30n00uoh0y.jpg");
}
#box .six {
-webkit-transform: rotateY(90deg) translateZ(80px);
background-image: url("https://tva1.sinaimg.cn/bmiddle/0080xEK2gy1gh4nwximscj30u01407ap.jpg");
}
</style>
</head>
<body>
<div id="view" style="width:320px;height:320px;margin:180px auto 0 auto">
<div id="box">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="four"></div>
<div class="five"></div>
<div class="six"></div>
</div>
</div>
</body>
</html>
