以上立方體是完全參考 https://blog.csdn.net/liuyingshudian/article/details/105249962 完成。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>選裝動畫</title> ...
以上立方體是完全參考 https://blog.csdn.net/liuyingshudian/article/details/105249962 完成。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>選裝動畫</title>
<style>
*{box-sizing: border-box;}
html{
background-color: gold;
}
body{
height: 20em;
width: 20em;
left: 50%;
top: 50%;
position: absolute;
margin: -10em 0 0 -10em;
perspective: 2000px;
}
#cube{
animation: 10s spin linear infinite;
transform-style: preserve-3d;
position: absolute;
height: 100%;
width: 100%;
}
#cube *{
height: 20em;
width:20em;
background-color: rgba(0,0,0,0.6);
position: absolute;
border:15px solid rosybrown;
}
@keyframes spin{
from{transfrom:rotateX(0deg) rotateY(0deg);}
to{transform: rotateX(360deg) rotateY(360deg);}
}
#front{transform: rotateY(0deg) translateZ(10em);}
#left{transform: rotateY(90deg) translateZ(-10em);}
#right{transform: rotateY(90deg) translateZ(10em);}
#top{transform: rotateX(90deg) translateZ(10em);}
#bottom{transform: rotateX(90deg) translateZ(-10em);}
#back{transform: rotateY(0deg) translateZ(-10em);}
</style>
</head>
<body>
<div id="cube">
<div id="front"></div>
<div id="left"></div>
<div id="right"></div>
<div id="top"></div>
<div id="bottom"></div>
<div id="back"></div>
</div>
</body>
</html>
放右上角一個試驗一下，不知道是否要根據瀏覽器寫不同的CSS？
