css 3d旋转,长度距离比例问题

比例是找规律找出来的额,,

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;

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值