admin管理员组文章数量:1130349
透视(perspective)
电脑显示屏是一个2D平面，图像之所以具有3D效果，其实只是一种视觉呈现，通过透视可以实现此目的。
透视可以将一个2D平面，在转换的过程当中，呈现3D效果。
透视原理：近大远小
浏览器透视：把近大远小的所有图像，秀视在屏幕上。
perspective:视距，表示视点距离屏幕的长短。视点，用于模拟透视效果时人眼的位置；
注：
1、并非任何情况下需要透视效果，根据开发需要进行设置；
2、是给父元素加上去的
视距越大，效果越不明显，视距越小，效果越明显；
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div:first-child{
width: 100px;
height: 100px;
background-color: green;
}
div:nth-child(2) {
width: 100px;
height: 100px;
background-color: pink;
transition: all 3s; /*过渡*/
}
div:hover:nth-child(2){
transform: rotateY(60deg);
}
body {
margin-left: 100px;
perspective: 1000px;
}
</style>
</head>
<body>
<div>原图</div>
<div>3D-透视</div>
</body>
</html>
效果如下：
透视(perspective)
电脑显示屏是一个2D平面，图像之所以具有3D效果，其实只是一种视觉呈现，通过透视可以实现此目的。
透视可以将一个2D平面，在转换的过程当中，呈现3D效果。
透视原理：近大远小
浏览器透视：把近大远小的所有图像，秀视在屏幕上。
perspective:视距，表示视点距离屏幕的长短。视点，用于模拟透视效果时人眼的位置；
注：
1、并非任何情况下需要透视效果，根据开发需要进行设置；
2、是给父元素加上去的
视距越大，效果越不明显，视距越小，效果越明显；
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div:first-child{
width: 100px;
height: 100px;
background-color: green;
}
div:nth-child(2) {
width: 100px;
height: 100px;
background-color: pink;
transition: all 3s; /*过渡*/
}
div:hover:nth-child(2){
transform: rotateY(60deg);
}
body {
margin-left: 100px;
perspective: 1000px;
}
</style>
</head>
<body>
<div>原图</div>
<div>3D-透视</div>
</body>
</html>
效果如下：
本文标签： 透视perspective
版权声明：本文标题：透视(perspective) 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://it.en369.cn/jiaocheng/1758713238a2783217.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论