css3 perspective perspective-origin属性的理解
2023-02-18 16:29:40 时间
perspective字面意思是:透视。
在w3school中它的解释为:设置元素被查看位置的视图:通俗讲,就是我们看看一个物体的所处的视角,近大远小。就比如我们正对着电脑:当我无限贴近电脑屏幕的时候,电脑的屏幕就无限大;当我们站起来远离电脑的时候,电脑的屏幕就无限变小。
如果我们不要perspective这个属性的话,那么你看到的就不再是一个矩形的旋转,而是一个矩形逐渐变窄,然后逐渐变宽,因为他没有透视(perspective)。
perspective属性的值是一个数字,他有2种实现方法:
1. transform: perspective(800);
2. perspective: 800;
perspective可以写在画布(父元素)上,也可以直接写在元素本身上,对于一张画布只有一个变型体的时候,几乎没有差别。但是当一个画布上 有多个变型体的时候,两种写法的差别立即就表现出来了。就像这张图,黄色的部分,perspective直接写在色块上,紫色的部 分,perspective写在了父容器上,以画布作为透视元素,所以子元素的形态都是不一样的。
![关于CSS3效果中,perspective <wbr>perspective-origin属性的理解 关于CSS3效果中,perspective <wbr>perspective-origin属性的理解](http://www.internetke.com/uploads/allimg/131125/1-131125142Z0G4.jpg)
perspective的值,则是决定3D变形效果的强度的,这个值大致可以理解为远近。只越大,你离物体就越远。就像一个离你很远的正方体(比如魔方)在做旋转,他的视觉效果就比较弱,但是如果这个魔方在你的眼前旋转,那么效果就比较强烈。
关于perspective-origin,w3school是指设置元素被查看位置的视图:perspective-origin 属性定义 3D 元素所基于的 X 轴和 Y 轴。该属性允许您改变 3D 元素的底部位置。当为元素定义 perspective-origin 属性时,其子元素会获得透视效果,而不是元素本身,它是和perspective属性一起使用的,而且只影响 3D 转换元素。
相关文章
- [PHP] 简单工厂模式-创建型设计模式
- [PHP] 原型模式-创建型设计模式
- [PHP] 对象池模式-创建型设计模式
- [Laravel系列] 验证规则required_without_all 的使用
- [PHP] 工厂方法设计模式-创建型设计模式
- [PHP] 生成器模式-创建型设计模式
- [Laravel系列] 在线客服系统代码优化-配置mysql数据库读写分离
- [PHP] 抽象工厂设计模式-创建型设计模式
- [Laravel系列] 在Laravel ORM 使用STRAIGHT_JOIN
- [MySQL系列] SELECT STRAIGHT_JOIN优化join查询技巧
- [PHP] 新浪企业邮箱登录功能难点梳理
- [MySQL系列] 使用STRAIGHT_JOIN 优化inner join查询排序索引问题
- [Laravel系列] 解决laravel中paginate()与distinct() count语句错误问题
- [Laravel系列] 框架中增加记录access log的日志中间件
- [Laravel系列] 解决Laravel中NotFoundHttpException异常
- [MySQL] 利用explain查看sql语句中使用的哪个索引
- [前端] 设定为disabled的表单域值不能被提交
- [MySQL] mysql中实现统计每日数量
- [MySQL] group_concat多行数据合并到一行方便取出来进行in查询
- [MySQL] 解决mysql导出excel数值型变成科学计数法问题