admin管理员组文章数量:1547489
perspective 属性定义 3D 元素距视图的距离,以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。
当为元素定义 perspective 属性时,其子元素会获得透视效果,而不是元素本身。
提示:请与 perspective-origin 属性一同使用该属性,这样您就能够改变 3D 元素的底部位置。
tramsform-style:使被转换的子元素保留其 3D 转换;
语法:transform-style: flat|preserve-3d;
transform-style 属性规定如何在 3D 空间中呈现被嵌套的元素。
注释:该属性必须与 transform 属性一同使用。在chrome中发现一个问题,那就是perspective一定要在rotateY(或rotateX)的前面。如果代码写成下面的情况,perspective的设置会无效。
案例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>perspective</title>
<style>
.contain {
width: 200px;
height: 200px;
padding:10px;
box-sizing: border-box;
border: 1px solid yellow;
// perspective: 500px;
}
.ct1 {
width: 180px;
height: 180px;
line-height: 180px;
border:1px solid #ccc;
// transform-style: preserve-3d;
transform:rotateX(45deg);
background:red;
text-align: center;
color:greenyellow;
}
</style>
</head>
<body>
<div class="contain">
<div class="ct1">
1
</div>
</div>
</body>
</html>
通过设置perspective的属性可以明显看到区别;
perspective:的兼容性不是很好,
相关文章:https://blog.csdn/dwb123456123456/article/details/82860487
本文标签: perspectivetramsformstyle
版权声明:本文标题:perspective和tramsform-style 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/dongtai/1725894983a1047527.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论