html5 3d 盒子(初级)

最新推荐文章于 2024-04-05 00:31:09 发布

会宇

最新推荐文章于 2024-04-05 00:31:09 发布

阅读量1.5k

点赞数 1

分类专栏： html js 文章标签： html js javaScript 3d

本文链接：https://blog.csdn.net/qq_39237554/article/details/80203195

版权

html 同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

15 篇文章 0 订阅

订阅专栏

<!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>

按键盘上的 ↑ → ↓ ← 可旋转图形

会宇

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
html5 3d 盒子(初级)

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;style&gt;#threeDiv{transform-style:preserve-3d;transform:rotateX(0deg) rotateY(0deg);width:100px;height:100px;position:relative;margin:auto;top:16...
复制链接

扫一扫