perspective-origin

版本：CSS3

CSS 属性 perspective-origin 指定了观察者的位置，用作 perspective 属性的消失点。

示例

perspective-origin: center;
perspective-origin: top;
perspective-origin: bottom right;
perspective-origin: 500% 200%;
perspective-origin: -170%;

/* global values */
perspective-origin: inherit;
perspective-origin: initial;
perspective-origin: unset;

浏览器支持

IE10以上版本的浏览器都支持perspective-origin

语法

perspective-origin:x-position| y-position

取值

• x-position：指定消失点的横坐标，其值有以下形式：
  • 长度值或相对于元素宽度的百分比值，可为负值。
  • left,关键字，0值的简记。
  • center,关键字，50%的简记。
  • right,关键字，100%的简记。
• y-position：指定消失点的纵坐标，其值有以下形式：
  • 长度值或相对于元素高度的百分比值，可为负值。
  • top,关键字，0值的简记。
  • center,关键字，50%的简记。
  • bottom,关键字，100%的简记。

默认值	50% 50%，效果等同于center center
适用于	变换元素
继承性	无
动画性	当值为数值时
计算值	除了指定绝对值，否则都为百分比

说明：

指定透视点的位置。

• 该属性提供2个参数值。
• 如果提供两个，第一个用于横坐标，第二个用于纵坐标。
• 如果只提供一个，该值将用于横坐标；纵坐标将默认为center。
• 对应的脚本特性为perspactiveOrigin。

CSS属性perspective-origin指定了观察者的位置，用作perspective属性的消失点。

实例

//html 

perspective-origin: top left;	perspective-origin: top;	perspective-origin: top right;
1 2 3 4 5 6	1 2 3 4 5 6	1 2 3 4 5 6
perspective-origin: left;	perspective-origin: 50% 50%;	perspective-origin: right;
1 2 3 4 5 6	1 2 3 4 5 6	1 2 3 4 5 6
perspective-origin: bottom left;	perspective-origin: bottom;	perspective-origin: bottom right;
1 2 3 4 5 6	1 2 3 4 5 6	1 2 3 4 5 6

//CSS /* shorthand classes for perspective-origin values */ .potl { perspective-origin: top left; -webkit-perspective-origin: top left; } .potm { perspective-origin: top; -webkit-perspective-origin: top; } .potr { perspective-origin: top right; -webkit-perspective-origin: top right; } .poml { perspective-origin: left; -webkit-perspective-origin: left; } .pomm { perspective-origin: 50% 50%; -webkit-perspective-origin: 50% 50%; } .pomr { perspective-origin: right; -webkit-perspective-origin: right; } .pobl { perspective-origin: bottom left; -webkit-perspective-origin: bottom left; } .pobm { perspective-origin: bottom; -webkit-perspective-origin: bottom; } .pobr { perspective-origin: bottom right; -webkit-perspective-origin: bottom right; } /* define the container div, the cube div, and a generic face */ .container { width: 100px; height: 100px; margin: 24px; border: none; } .cube { width: 100%; height: 100%; backface-visibility: visible; perspective: 300px; transform-style: preserve-3d; -webkit-backface-visibility: visible; -webkit-perspective: 300px; -webkit-transform-style: preserve-3d; } .face { display: block; position: absolute; width: 100px; height: 100px; border: none; line-height: 100px; font-family: sans-serif; font-size: 60px; color: white; text-align: center; } /* define each face based on direction */ .front { background: rgba(0, 0, 0, 0.3); transform: translatez(50px); -webkit-transform: translatez(50px); } .back { background: rgba(0, 255, 0, 1); color: black; transform: rotatey(180deg) translatez(50px); -webkit-transform: rotatey(180deg) translatez(50px); } .right { background: rgba(196, 0, 0, 0.7); transform: rotatey(90deg) translatez(50px); -webkit-transform: rotatey(90deg) translatez(50px); } .left { background: rgba(0, 0, 196, 0.7); transform: rotatey(-90deg) translatez(50px); -webkit-transform: rotatey(-90deg) translatez(50px); } .top { background: rgba(196, 196, 0, 0.7); transform: rotatex(90deg) translatez(50px); -webkit-transform: rotatex(90deg) translatez(50px) } .bottom { background: rgba(196, 0, 196, 0.7); transform: rotatex(-90deg) translatez(50px); -webkit-transform: rotatex(-90deg) translatez(50px); } /* make the table a little nicer */ th, p, td { background-color: #eeeeee; padding: 10px; font-family: sans-serif; text-align: left; }

实例

#div1
{
position:relative;
height:200px;
width:200px;
margin:50px;
padding:10px;
border:1pxsolidblack;
}

#div2
{
padding:50px;
position:absolute;
border:1pxsolidblack;
background-color:red;
transform:rotatex(45deg);
-webkit-transform:rotatex(45deg);/*safari and chrome*/
}


functionchangepersp(value)
{
document.getelementbyid('div1').style.webkitperspective=value;
document.getelementbyid('persp').innerhtml=value;
}

functionchangeorgpersp()
{
varx=document.getelementbyid('operspx').value;
vary=document.getelementbyid('operspy').value;
document.getelementbyid('div1').style.webkitperspectiveorigin=x+'%'+y+'%';
document.getelementbyid('opersp').innerhtml=x+"%"+y+"%";
} 
hello
changeperspective:

webkit-perspective:;

changetheorigins:
x-axis:
y-axis:
webkit-perspective-origin:50%50%; 

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com