+方块
+正方体
+六边形
+球
初始化
键盘事件: 上(w) 下(s) 左(a) 右(d) 透视-(q) 透视+(e)
1、鼠标点击选中
2、按住Ctrl键 鼠标左键拖动 rotate X、Y 变换
3、按住Ctrl键 鼠标右键拖动 translate X、Y变换
4、鼠标滚轮 操作 translate Z
X轴旋转:
自动
重置
Y轴旋转:
自动
重置
Z轴位移:
重置
结构
样式
.stage_area{ transform-style: preserve-3d; position: relative; height: 100%; width: 100%; background: rgba(164, 219, 201, 0.3); } .stage_area .container{ font-size:9px; transform-style: preserve-3d; width:200px; height:200px; background:rgba(57, 184, 248,.7); position:absolute; top:50%; left:50%; margin-left:-100px; margin-top:-100px; } .stage_area .container a{ transform-style: preserve-3d; display:block; width:100px;height:100px; position:absolute; background:rgba(231, 201, 47,.7); color:#000; width:50px;height:50px; top:50%; left:50%; margin-left:-50px; margin-top:-50px; }
舞台X:0 rotateY:0 translateZ:0
容器 rotateX:0 rotateY:0 translateZ:0
内容1 rotateX:0 rotateY:10 translateZ:200