translateZ()相关属性
0
[已解决问题]
解决于 2017-04-19 16:02
用C3是使用的translateZ属性到底是为了什么，当时想了想，用translateZ将各个面都沿着Z轴平移了100像素，但是还是得不到正方体啊？？ 我看网上其他人写的一些代码都设置了这个属性。。。 但是我还是没弄明白~~~ 请大神解答~~~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0;padding:0;}
ul{
width: 200px;
height: 200px;
list-style: none;
margin: 200px auto;
transition: all 6s;
transform-style: preserve-3d;
position: relative;
transform: scaleX(2.0) scaleY(2.0) rotateX(0deg) rotateY(0deg);
}
ul:hover {
transform: scaleX(2.0) scaleY(2.0) rotateX(360deg) rotateY(360deg);
}
li{
width: 100%;
height: 100%;
text-align: center;
line-height: 200px;
font-size: 30px;
color: #fff;
font-family: '微软雅黑';
position: absolute;
}
ul li:nth-child(1){
/* 这里还是不明白为什么这里要给每一个li都写上translateZ（） */
/* translateZ（）起到了什么作用 */
transform: rotateX(0deg) translateZ(100px);
background-color: rgba(255, 0, 0, 0.6);
}
ul li:nth-child(2){
transform: rotateX(-90deg) translateZ(100px);
background-color: rgba(0,255, 0, 0.6);
}
ul li:nth-child(3){
transform: rotateX(-180deg) translateZ(100px);
background-color: rgba(0, 0, 255, 0.6);
}
ul li:nth-child(4){
transform: rotateX(-270deg) translateZ(100px);
background-color: rgba(255, 255, 0, 0.6);
}
ul li:nth-child(5){
transform: rotateY(90deg) translateZ(100px);
background-color: rgba(255, 0, 255, 0.6);
}
ul li:nth-child(6){
transform: rotateY(-90deg) translateZ(100px);
background-color: rgba(0, 255, 255, 0.6);
}
</style>
</head>
<body>
<ul>
<li>第1个盒子</li>
<li>第2个盒子</li>
<li>第3个盒子</li>
<li>第4个盒子</li>
<li>第5个盒子</li>
<li>第6个盒子</li>
</ul>
</body>
</html>
最佳答案
0
先旋转然后垂直方向移100px
奖励园豆：5
我不明白的是，为什么给每一li设置translateZ（100px）过后，原本挤在一起的里会自动分开~~ 因为如果是Z轴上平移的话，每个li都会平移，那也得不到正方体啊~~
@奋斗的少年-欧耶: 他开始6个li都是一个位置 每个li都是200px,第一个是没有x,y旋转直接向前100px，是正方体的正面，第二个是x向后转90度样子是和你视线平行在第一个的中间，然后向前100px，正好和第一个下面衔接，是正方体低部，第三个是x旋转向后180和第一个反方向，不向前100px就是在第一个后面100px位置，他向前100px就跑到第一个后面100+100=200px，是正方体的后面，第四个x旋转向后270和第二个是反方向，他在向前100px就到第一个上面衔接是正方体顶部，第五个y旋转90是向右旋转90是和你视线垂值然后向前100px是正方体右面，最后一个y向左90同理是正方体左面，我说这么细还不清楚嘛
@一切都要简单化: 哦哦 理解了 理解了，，非常感谢！！