关于perspective-origin:50% 50%的问题

老师，这个50%是多少的50%？如上图，这个骰子每个面边长100px，perspective-origin:50% 50%是物体的x轴50%，y轴50%，即x轴50px,y轴50px吗？

小白_0001 2018-05-05

源自：CSS3转换 6-4 perspective

收起

3回答

卡布琦诺回答被采纳获得+3积分 2018-05-07 17:11:13

perspective-origin是3D变形中的属性，主要用来决定perspective属性的源点角度，它实际上设置了X轴和Y轴位置(或者说基点)，在该位置观看者好像在观看该元素的子元素

语法：perspective-origin: x-axis y-axis;

x-axis:
定义视图在x轴上的位置。默认值：50%。可能的参数值形式:left、center、right、length和%
y-axis:
定义视图在y轴上的位置。默认值：50%。可能的参数值形式:top、center、bottom、length和%

希望可以帮到你~

收起回答

小白_0001 提问者 #1

非常感谢！

2018-05-08 09:12:36

提问者小白_0001 2018-05-06 18:31:01

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>backface-visibility</title>
<style type="text/css">
body {
    -webkit-perspective: 800px;
            perspective: 800px;
    -webkit-perspective-origin: 50%;
            perspective-origin: 50%;
}
.cube { display: inline-block; width: 100px; height: 100px; margin: 50px;
    -webkit-transform-style: preserve-3d;
            transform-style: preserve-3d;
}
.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;
}
</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>
</body>
</html>

收起回答