帮忙看下这段代码里面的perspective-origin

下面这段代码中，有两个疑问：1. persective-origin:top center；没有起到作用，不知道为什么 2. perspective和perspective-origin 只能放在body标签中，放进.cube 的div中没有效果，求解。

<!DOCTYPE html><html><head><title>cube</title><style type="text/css">

body{
-webkit-perspective: 800px;
-moz-perspective: 800px;
-o-perspective: 800px;
perspective: 800px;

-webkit-perspective-origin: top center;

-moz-perspective-origin: top center;

-ms-perspective-origin: top center;

-o-perspective-origin: top center;

perspective-origin: top center;

}
.cube{
position: absolute;
transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
width: 100px;
height: 100px;
margin:50px;
}

.c2{
position: absolute;
left:300px;
}

.c2>div{
backface-visibility: hidden;
-webkit-backface-visibility: hidden;

}
.cube>div{
position: absolute;
width: 100%;
height: 100%;
border: 1px solid #ccc;
background: rgba(255,255,255,.8);
box-shadow: inset 0 0 20px rgba(0,0,0,.2);
font-size: 100px;
line-height: 100px;
text-align: center;
color: #333;
}

.front{
transform: translateZ(50px);
-webkit-transform: translateZ(50px);
}

.back{
transform: rotateY(180deg) translateZ(50px);
-webkit-transform: rotateY(180deg) translateZ(50px);
}

.top{
transform: rotateX(90deg) translateZ(50px);
-webkit-transform: rotateX(90deg) translateZ(50px);
}

.bottom{
transform: rotateX(-90deg) translateZ(50px);
-webkit-transform: rotateX(-90deg) translateZ(50px);
}

.left{
transform: rotateY(-90deg) translateZ(50px);
-webkit-transform: rotateY(-90deg) translateZ(50px);
}

.right{
transform: rotateY(90deg) translateZ(50px);
-webkit-transform: rotateY(90deg) translateZ(50px);
}</style></head><body>
<div class="cube c1">
<div class="front">1</div> <div class="back">2</div> <div class="left">3</div> <div class="right">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="left">3</div> <div class="right">4</div> <div class="top">5</div> <div class="bottom">6</div> </div></body></html>

栀子_ 2017-02-05

源自：CSS3转换 6-3 perspective

收起

1回答

卡布琦诺 2017-02-05 22:16:45

perspective字面意思是：透视。

在w3school中它的解释为:设置元素被查看位置的视图：通俗讲，就是我们看看一个物体的所处的视角，近大远小。就比如我们正对着电脑：当我无限贴近电脑屏幕的时候，电脑的屏幕就无限大；当我们站起来远离电脑的时候，电脑的屏幕就无限变小。

如果我们不要perspective这个属性的话，那么你看到的就不再是一个矩形的旋转，而是一个矩形逐渐变窄，然后逐渐变宽，因为他没有透视（perspective）。

perspective属性的值是一个数字，他有2种实现方法：

1.transform: perspective(800);

2.perspective: 800;

perspective可以写在画布（父元素）上，也可以直接写在元素本身上，对于一张画布只有一个变型体的时候，几乎没有差别。但是当一个画布上有多个变型体的时候，两种写法的差别立即就表现出来了。就像这张图，黄色的部分，perspective直接写在色块上，紫色的部分，perspective写在了父容器上，以画布作为透视元素，所以子元素的形态都是不一样的。

perspective的值，则是决定3D变形效果的强度的，这个值大致可以理解为远近。只越大，你离物体就越远。就像一个离你很远的正方体（比如魔方）在做旋转，他的视觉效果就比较弱，但是如果这个魔方在你的眼前旋转，那么效果就比较强烈。

关于perspective-origin，是指设置元素被查看位置的视图：perspective-origin 属性定义 3D 元素所基于的 X 轴和 Y 轴。该属性允许您改变 3D 元素的底部位置。当为元素定义 perspective-origin 属性时，其子元素会获得透视效果，而不是元素本身，它是和perspective属性一起使用的，而且只影响 3D 转换元素。

希望可以帮到你~

收起回答