admin 管理员组文章数量: 1184232
视频教程
[网站开发入门指南141] 透视perspective 让三维变换更真实｜ html css 零基础入门教程 html5 css3_哔哩哔哩_bilibili
perspective需要写在父级,数值越大,意味着眼睛离屏幕越远,透视效果越弱
<style>
*{margin:0;padding:0;}
body{height:100vh;display: grid;place-content:center;}
.container{perspective:800px;}
.child{width:300px;height:300px;background:#38f;transform: rotateY(0);transition:all 1s;}
.child:hover{transform:rotateY(45deg)}
</style>
<div class="container">
<div class="child">111</div>
</div>perspective加给父级与加给自身的区别
我们平时给元素设置视距，增加其3D效果。但是给父元素设置perspective属性和给自身直接设置transform：perspective属性有时候效果一样，有时候效果差别却很大。下面我根据自己的经验来浅谈一下自己的认识。
如果页面中只有一个元素的时候，给父元素加perspective：800px；（此处设置的值为800px）的效果和给自身加transform：perspective（800px）；的效果是一样的。
代码和效果图如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body {
/*perspective: 800px;*/
}
div {
width: 200px;
height: 200px;
background-color: red;
margin: 100px auto;
transform: perspective(800px) rotateY(50deg);
/*transform: rotateY(50deg);*/
}
</style>
</head>
<body>
<div></div>
</body>
</html>但是，如果页面中有多个元素的时候，差异性就体现出来了。
在给父元素加perspective：800px；属性的时候，会以父元素的某个点为视点，看所有的子元素，所以看到的每个子元素的样式是不一样的。
代码和示意图如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body {
perspective: 800px;
}
div {
width: 200px;
height: 200px;
background-color: red;
float: left;
margin: 50px 20px 0 0;
transform: rotateY(-40deg);
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
在分别给子元素加transform：perspective（800px）；属性的时候，会以元素自身的某个点作为视点，所以呈现出的效果还是一样的。
代码和示意图如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body {
/*perspective: 800px;*/
}
div {
width: 200px;
height: 200px;
background-color: red;
float: left;
margin: 50px 20px 0 0;
transform: perspective(800px) rotateY(-40deg)；
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>本文标签： css perspective
版权声明：本文标题：css中perspective解析 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/b/1758706948a3089469.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论