关于cube

自己写的时候rotate和translate没向老师那么写，想问问这样写ok吗？

<html>

<head>
<meta charset="UTF-8" />
<title>3dcube</title>
<style type=text/css>
    body {
-moz-perspective: 700px;
}

.c1>div {
transform-style: preserve-3d;
display: inline-block;
width: 100px;
height: 100px;
margin: 50px;
position: absolute;
box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.2);
background-color: rgba(255, 255, 255, 0.1);
font-size: 20px;
line-height: 100px;
text-align: center;
backface-visibility:visible;
}
.front{
transform:translatez(50px);
}
.back{
transform:translatez(-50px);
}
.top{
transform:rotatex(90deg) translatez(50px);
}
.bottom{
transform:rotatex(90deg) translatez(-50px)
}
.left{
transform:rotatey(90deg) translatez(-50px);
}
.right{
transform:rotatey(90deg) translatez(50px);
}
</style>
</head>

<body>
<div class="c1">
    <div class="front">1</div>
    <div class="back">2</div>
    <div class="top">3</div>
    <div class="bottom">4</div>
    <div class="left">5</div>
    <div class="right">6</div>
</div>
</body>

</html>

newbie朱古力 2017-01-24

源自：CSS3转换 6-6 backface-visibility

收起

2回答

慕尘roz 回答被采纳获得+3积分 2017-01-24 23:19:33

哈哈，你好聪明，这样也行，也是立体的。但有区别。老师那个旋转不同的角度然后沿z轴平移，立方体相对的两个面的数字是朝两个方向的，通过透视来看到另一个方向的数字是反的。而你的相对两个面是朝一个方向的，相对两个面的朝向没有变，但在z轴上往两个方向去平移拉开了距离。而且由于每个面都是可视的方向，体现不出元素背面被透视backface-visibility这个属性的功能。

收起回答

newbie朱古力提问者 #1

嗯嗯明白了，非常感谢！

2017-01-25 06:26:18
栀子_ #2

请问源代码里面，.back { -webkit-transform: rotatey(180deg) translatez(50px); transform: rotatey(180deg) translatez(50px); } translatez(50px) 是沿着z轴的正半轴平移50px, 那么back这个面不应该是tranlatez(-50px)吗？我不太理解为什么所有面的平移量都是translate(50px)

2017-02-04 11:54:49
慕尘roz 回复栀子_ #3

坐标方向也转过去了，这个z轴方向已经变化了。

2017-02-04 12:33:23