<!DOCTYPE html>
<html>
<head>
<style>
#threeDiv{transform-style:preserve-3d;transform:rotateX(0deg) rotateY(0deg);
width:100px;height:100px;position:relative;margin:auto;top:164px;right:0;bottom:9;left:0;}
.cDiv{overflow:hidden;width:100px;height:100px;position:absolute;box-sizing: border-box;border:1px solid black;color:black;line-height: 100px;text-align: center;}
.cDiv:nth-of-type(1) {transform:translateZ(50px);background-color:red;}
.cDiv:nth-of-type(2) {transform: rotateY(90deg)translateZ(50px);;background-color:blue;}
.cDiv:nth-of-type(3) {transform: translateX(-50px) rotateY(-90deg);background-color:green;}
.cDiv:nth-of-type(4) {transform: translateZ(-50px) rotateY(180deg);background-color:orange;}
.cDiv:nth-of-type(5) {transform: translateY(-50px) rotateX(90deg);background-color:yellow;}
.cDiv:nth-of-type(6) {transform: translateY(50px) rotateX(-90deg);background-color:white;}
</style>
</head>
<body>
<div id="threeDiv" >
<div class="cDiv" style="" id="front" >我是正面红色</div>
<div class="cDiv" style="" id="right" >我是右边蓝色</div>
<div class="cDiv" style="" id="left" >我是左边绿色</div>
<div class="cDiv" style="" id="back" >我是后面橘黄色</div>
<div class="cDiv" style="" id="top" >我是顶部黄色</div>
<div class="cDiv" style="" id="bottom" >我是底部白色</div>
</div>
<script>
var ele = document.getElementById("threeDiv");
var style = ele.style;
var up = 0;
var down = 0;
document.onkeydown = function(key){
var code = key.keyCode;
switch(code){
case 37 : style.transform = "rotateX(" + up + "deg) rotateY(" + down-- + "deg)";break;
case 38 : style.transform = "rotateX(" + up++ + "deg) rotateY(" + down + "deg)";break;
case 39 : style.transform = "rotateX(" + up + "deg) rotateY(" + down++ + "deg)";break;
case 40 : style.transform = "rotateX(" + up-- + "deg) rotateY(" + down + "deg)";break;
}
}
</script>
</body>
</html>
按键盘上的 ↑ → ↓ ← 可旋转图形