<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
body{
background: black;
perspective:600px;
}
#container {
margin: 100px auto ;
width: 200px;
height: 200px;
position: relative;
-webkit-transform-style: preserve-3d;/*<!--子元素也可以實現動畫的語句-->*/
/*-webkit-transform: rotateY(50deg);*/
-webkit-animation: run 4s linear infinite ;
}
@keyframes run {/*<!--和animation配合使用 -->*/
/*0%{*/
/*}*/
100%{
-webkit-transform: rotateY(360deg);
}
}
#container div {
width: 200px;
height: 200px;
background: gainsboro;
position: absolute;
left: 0;
top: 0;
text-align: center;
line-height: 200px;
font-size: 50px;
border-radius: 10px;
opacity: 0.5;
}
#div1 {
-webkit-transform: rotateX(90deg) translateZ(100px);
/*<!-- z軸也隨着元素旋轉 始終垂直元素 -->*/
}
#div2 {
-webkit-transform: translateZ(100px);
z-index: 1;
}
#div3 {
-webkit-transform: rotateY(90deg) translateZ(100px);
}
#div4 {
-webkit-transform: rotateY(180deg) translateZ(100px);
}
#div5 {
-webkit-transform: rotateY(-90deg) translateZ(100px);
}
#div6 {
-webkit-transform: rotateX(-90deg) translateZ(100px);
}
</style>
</head>
<body>
<div id="container">
<div id="div1">1</div>
<div id="div2">2</div>
<div id="div3">3</div>
<div id="div4">4</div>
<div id="div5">5</div>
<div id="div6">6</div>
</div>
</body>
</html>