<!doctype html>
<html>
<head>
<title>标题</title>
<meta charset="utf-8">
<style>
#stage {
width: 800px;
height: 400px;
margin: 0 auto;
border: 1px solid #333;
/*perpective*/
perspective: 780px;
}
#container {
width: 800px;
height: 400px;
border: 1px solid red;
transform: rotatex(-20deg) rotatey(0deg);
position: relative;
/*规定 子元素 按照3d位置摆放*/
transform-style: preserve-3d;
}
#container div {
width: 100px;
height: 100px;
background: #e4393c;
/*绝对定位*/
position: absolute;
top: 150px;
left: 350px;
}
#container div:nth-child(1) {
transform: rotatey(0deg) translatez(200px);
}
#container div:nth-child(2) {
transform: rotatey(60deg) translatez(200px);
}
#container div:nth-child(3) {
transform: rotatey(120deg) translatez(200px);
}
#container div:nth-child(4) {
transform: rotatey(180deg) translatez(200px);
}
#container div:nth-child(5) {
transform: rotatey(240deg) translatez(200px);
}
#container div:nth-child(6) {
transform: rotatey(300deg) translatez(200px);
}
</style>
</head>
<body>
<div id="stage">
<div id="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
</div>
<script>
console.log(container.style.transform);
var adv = {
deg: 0,
singleRotate: function () {
this.deg += 1;
container.style.transform = "rotatex(" + this.deg + "deg) rotatey(" + this.deg + "deg)";
},
rotate: function () {
setInterval(this.singleRotate.bind(this), 15);
},
danji: function () {
}
}
adv.rotate();
</script>
</body>
</html>
transform-style 和 perspective 这2个属性是一定要有的
transform-style: preserve-3d; 设置按照3维空间摆
perspecitive: 780px 这个值决定了 3D效果的强烈程度 越小感觉越强烈 ，也站的越近
