首页 > 其他 > 详细

transform-transition-animation(1)

时间:2019-11-27 12:14:53      阅读:61      评论:0      收藏:0      [点我收藏+]

技术分享图片

 

 

网布就是我们的屏幕,x轴沿屏幕平行的水平方向,y轴沿屏幕平行的垂直方向,z轴沿与屏幕垂直方向。

rotateX(angle), rotateY(angle), rotateZ(angle), rotate3d(x, y, z, angle)
为什么我旋转了之后没有出现矩形效果呢?更近的地方不应该看起来更大吗?非常好的问题,说明你思考了,这里我们漏了一个很重要的因素,设定3D环境 perspective;在没有设定视距条件下,会被默认为视距无穷远,因此旋转得到的微弱的梯形效果也就忽略了
技术分享图片

 

 

.rotate3d {
  background: lightgreen;
  transform: perspective(100px) rotate3d(1,0,-1,30deg);
}
技术分享图片

 

transform-transition-animation(1)

原文:https://www.cnblogs.com/Damocless/p/11940588.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!