比例是找规律找出来的额,,
https://www.w3school.com.cn/tiy/t.asp?f=css3_transform
<!DOCTYPE html>
<html>
<head>
<style>
.p{
transform-style: preserve-3d;
/* perspective: 800px; */
transform: perspective(400px) rotateX(0deg) rotateY(0deg);
}
div
{
width:100px;
height:100px;
background-color:yellow;
/* Rotate div */
}
.ma{
width:100px;
height:100px;
background-color:yellow;
/* Rotate div */
transform: rotateY(0deg) translateZ(100px);
}
</style>
</head>
<body>
<div class="p">
<div class="ma">Hello World</div>
</div>
<div>Hello World</div>
</body>
</html>
width:100,perspective(400px),transform: rotateY(0deg) translateZ(100px);===>width:133.33;
width:100,perspective(400px),transform: rotateY(0deg) translateZ(200px);===>width:200;
width:100,perspective(800px),transform: rotateY(0deg) translateZ(100px);===>widtth:114.29;
width:100,perspective(800px),transform: rotateY(0deg) translateZ(200px);===>widtth:133.33;
规律:
width:w,perspective(s),transform: rotateY(0deg) translateZ(l);===>widtth= w+w*(l/(s-l)) ;
验证:
width100,perspective(1000px),transform: rotateY(0deg) translateZ(100px);===>widtth= 100+100*(100/900)=100+1/9=111.11;
width:50,perspective(1000px),transform: rotateY(0deg) translateZ(100px);===>widtth=50+50*(100/900)=55.556;