老师，请帮忙解答一下。问题写再备注里面了。谢谢
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
body {
-webkit-perspective: 800px;
perspective: 800px;
-webkit-perspective-origin: 50%;
perspective-origin: 50%;
}
.cube{
display:inline-block;
/* border:1px red solid; */
width:100px;
height:100px;
-webkit-transform-style:preserve-3d;
transform-style:preserve-3d;
margin:50px;
/* inline-block:margin:auto无效 */
position:relative;
}
.cube div{
position:absolute;
width:100%;
height:100%;
border:2px magenta solid;
text-align:center;
line-height:100px;
box-shadow: inset 0 0 15px 0 rgba(0, 0, 0, .2);
background-color: rgb(255, 255, 255,.1);
color: gray;
font-size: 20px;
}
.cube .front{
-webkit-transform:translatez(50px);
transform:translatez(50px);
}
.cube .back{
-webkit-transform:rotatey(180deg) translateZ(50px);/* 为什么不是-50px */
transform:rotatey(180deg) translateZ(50px);
/* 前后两个面不是从坐标x=0,y=0,z=0开始的么
.back和.front坐标怎么都是向Z=50px移动（正方向），不是重叠了么。
*/
}
.cube .right{
-webkit-transform:rotatey(90deg) translatez(50px);/* 为什么不是移动 rotatey(90deg) translatex(50px)*/
transform:rotatey(90deg) translate(50px);
/*学生的思路是这样的： 绝对定位后，6个面重叠在一起，及6个面原始坐标X=0;Y=0;z=0;
frontZ坐标向上移动50px.back坐标向Z方向移动-50px;
让他们之间高度差为100px;
再移动.right，让这个面rotate(90deg),再向X轴移动50px；
*/
/* ？难道坐标系是跟随着面在的移动或者转动？
这个坐标系是我们的视角，还是固定再旋转的面上了？
这样向就可以理解老师的代码，但是这个不符合前面rotate的定义。蒙圈了。
*/
}
</style>
</head>
<body>
<div class="cube c1">
<div class="front">1</div>
<div class="back">2</div>
<div class="right">3</div>
<!-- <div class="left">4</div>
<div class="top">5</div>
<div class="bottom">6</div> -->
</div>
<div class="cube c2">
<div class="front">1</div>
<div class="back">2</div>
<div class="right">3</div>
<!-- <div class="left">4</div>
<div class="top">5</div>
<div class="bottom">6</div> -->
</div>
</body>
</html>
正在回答 回答被采纳积分+1
相似问题
登录后可查看更多问答，登录/注册
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星