介绍 perspective-origin:轴轴; & lt; !DOCTYPE html>
& lt; html>
& lt; head>
& lt;元charset=皍tf-8"祝辞
& lt; style>
# div1
{
位置:相对;
身高:150 px;
宽度:150 px;
保证金:50 px;
填充:10 px;
边界:1 px固体黑色;
角度:150;
perspective-origin: 10% - 10%;
-webkit-perspective: 150;/* Safari和Chrome */-webkit-perspective-origin: 10% - 10%;/* Safari和Chrome */}
# div2
{
填充:50 px;
位置:绝对的;
边界:1 px固体黑色;
背景颜色:红色;
变换:rotateX(45度);
-webkit-transform: rotateX(45度);/* Safari和Chrome */}
& lt;/style>
& lt;/head>
& lt; body>
& lt; div id=癲iv1"祝辞
& lt; div id=癲iv2"祝辞HELLO
& lt;/div>
& lt;/body>
& lt;/html> 这篇文章主要介绍了perspective-origin属性的使用方法,具有一定借鉴价值,需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。
perspective-origin属性用于定义3 d元素所基于的X轴和Y轴,它允许改变3 d元素的底部位置。当为元素定义perspective-origin属性时,其子元素会获得透视效果,而不是元素本身。
<强>作用: perspective-origin属性定义3 d元素所基于的X轴和Y轴,该属性允许您改变3 d元素的底部位置。当为元素定义perspective-origin属性时,其子元素会获得透视效果,而不是元素本身。
<强>语法:
轴:定义该视图在X轴上的位置。默认值:50%。可能的值:左,中心,正确,长度%
轴:定义该视图在Y轴上的位置。默认值:50%。可能的值:前,中心,底部,长度,%
<强>注:该属性必须与角度属性一同使用,而且只影响3 d转换元素。
效果图:
感谢你能够认真阅读完这篇文章,希望小编分享perspective-origin属性的使用方法内容对大家有帮助,同时也希望大家多多支持,关注行业资讯频道,遇到问题就找,详细的解决方法等着你来学习!
