zoukankan      html  css  js  c++  java
  • css3 perspective perspective-origin属性的理解

    perspective字面意思是:透视。
    在w3school中它的解释为:设置元素被查看位置的视图:通俗讲,就是我们看看一个物体的所处的视角,近大远小。就比如我们正对着电脑:当我无限贴近电脑屏幕的时候,电脑的屏幕就无限大;当我们站起来远离电脑的时候,电脑的屏幕就无限变小。
    如果我们不要perspective这个属性的话,那么你看到的就不再是一个矩形的旋转,而是一个矩形逐渐变窄,然后逐渐变宽,因为他没有透视(perspective)。
    perspective属性的值是一个数字,他有2种实现方法:

    1. transform: perspective(800);

    2. perspective: 800;
     
    perspective可以写在画布(父元素)上,也可以直接写在元素本身上,对于一张画布只有一个变型体的时候,几乎没有差别。但是当一个画布上 有多个变型体的时候,两种写法的差别立即就表现出来了。就像这张图,黄色的部分,perspective直接写在色块上,紫色的部 分,perspective写在了父容器上,以画布作为透视元素,所以子元素的形态都是不一样的。
     
    关于CSS3效果中,perspective <wbr>perspective-origin属性的理解
     
    perspective的值,则是决定3D变形效果的强度的,这个值大致可以理解为远近。只越大,你离物体就越远。就像一个离你很远的正方体(比如魔方)在做旋转,他的视觉效果就比较弱,但是如果这个魔方在你的眼前旋转,那么效果就比较强烈。
     
    关于perspective-origin,w3school是指设置元素被查看位置的视图:perspective-origin 属性定义 3D 元素所基于的 X 轴和 Y 轴。该属性允许您改变 3D 元素的底部位置。当为元素定义 perspective-origin 属性时,其子元素会获得透视效果,而不是元素本身,它是和perspective属性一起使用的,而且只影响 3D 转换元素。
  • 相关阅读:
    反射,Expression Tree,IL Emit 属性操作对比
    vue2.0 创建项目
    vue-cli3.0 Typescript 项目集成环信WebIM 群组聊天
    vue-property-decorator vue typescript写法
    TypeScript中是使用强类型函数作为参数
    应用监控与管理Actuator
    ES数据库下载安装
    删除SDE用户报ORA-00604 ORA-21700
    ArcGIS中的WKID
    改变您的HTTP服务器的缺省banner
  • 原文地址:https://www.cnblogs.com/weizaiyes/p/6206732.html
Copyright © 2011-2022 走看看