perspective和perspective-origin在body和div中效果不同
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>backface-visibility</title>
<style type="text/css">
body {
}
.cube {
display: inline-block;
width: 100px;
height: 100px;
margin: 50px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-perspective: 800px;
perspective: 800px;
-webkit-perspective-origin: 50%;
perspective-origin: 50%; }
.cube > div {
position: absolute;
width: 100%;
height: 100%;
box-shadow: inset 0 0 15px rgba(0, 0, 0, .2);
background-color: rgba(255, 255, 255, .1);
color: gray;
font-size: 20px;
line-height: 100px;
text-align: center;
}
.front {
-webkit-transform: translatez(50px);
transform: translatez(50px);
}
.back {
-webkit-transform: rotatey(180deg) translatez(50px);
transform: rotatey(180deg) translatez(50px);
}
.right {
-webkit-transform: rotatey(90deg) translatez(50px);
transform: rotatey(90deg) translatez(50px);
}
.left {
-webkit-transform: rotatey(-90deg) translatez(50px);
transform: rotatey(-90deg) translatez(50px);
}
.top {
-webkit-transform: rotatex(90deg) translatez(50px);
transform: rotatex(90deg) translatez(50px);
}
.bottom {
-webkit-transform: rotatex(-90deg) translatez(50px);
transform: rotatex(-90deg) translatez(50px);
}
.c1 > div {
-webkit-backface-visibility: visible;
backface-visibility: visible;
}
.c2 > div {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
</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
你可以这样理解 , perspective是设置3d效果的景深，通俗来说就是设置你的眼睛与这个3d元素的距离。你从远处和近处分别观察同一个物体，其3d效果肯定是不同的。
还有一个属性是perspective-origin，则是用来设置3d效果的视角的，说白了就是你观察3d元素的角度，正常情况下物体是放在你眼睛的正前方，你眼睛只需平视即可，如果把物体向上下左右不同方向移动，在你的头部不能移动的前提下，你的眼睛要想看到物体就需要随着物体的移动而转动，这就是视角。而在不同的视角下，物体的3d效果肯定也会不同 .
放在div里面 , 离得很近 ,放在body里面 ,离得稍微远一点 , 所以看到的肯定会有点不同哈 .
知识来源于生活经验呀嘿嘿
- 参与学习 人
- 提交作业 2198 份
- 解答问题 5012 个
如果你有web端基础，既想进阶，又想进军移动端开发，那就来吧，我们专题为你带来的课程有HTML5、CSS3、移动基础、响应式、bootstrap、less等，让你在前端道路上畅通无阻！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星