高考报名时间2022年11月1日还剩 天 距离2023年6月7日高考还有 天
栏目分类:
子分类:
返回
名师互学网用户登录
名师互学网
快速导航关闭
当前搜索
当前分类
前沿技术 软件开发 系统运维 产品运营 生活办公 面试经验 考试题库
子分类
人工智能 大数据 云计算 区块链 物联网 深度学习 机器学习 NLP 计算机视觉 语音识别 其他 大数据系统 数据可视化 数据挖掘与分析 其他 Docker/k8s 虚拟化 云平台 其他 基本原理 数字货币 智能合约 EOS应用 其他 通讯技术 嵌入式开发 单片机 物联网应用 HarmonyOS 其他 后端开发 Web开发 移动开发 游戏开发 Python Java 架构设计 C/C++/C# PHP .Net Go语言 R语言
实用工具
学习工具 小学数学练习 字帖生成 在线画板 函数绘制 拼音字母表 在线词典 黄历查询 亲戚关系计算 安全期计算 中国历史 Excel函数 模拟请求 json格式化 浏览器指纹
热门搜索
路由器设置 木托盘 宝塔面板 儿童python教程 心情低落 朋友圈 vim 双一流学科 专升本 我的学校 日记学校 西点培训学校 汽修学校 情书 化妆学校 塔沟武校 异形模板 西南大学排名 最精辟人生短句 6步教你追回被骗的钱 南昌大学排名 清朝十二帝 北京印刷学院排名 北方工业大学排名 北京航空航天大学排名 首都经济贸易大学排名 中国传媒大学排名 首都师范大学排名 中国地质大学(北京)排名 北京信息科技大学排名
名师互学网 > IT > 软件开发 > Web开发 > Html/CSS > CSS教程

详解CSS3的perspective属性设置3D变换距离的方法

CSS教程 更新时间： 发布时间： IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

perspective属性对于3D变形来说至关重要。该属性会设置查看者的位置，并将可视内容映射到一个视锥上，继而投到一个2D视平面上。如果不指定透视，则Z轴空间中的所有点将平铺到同一个2D视平面中，并且变换结果中将不存在景深概念。

上面的描述可能让人难以理解一些，其实对于perspective属性，我们可以简单的理解为视距，用来设置用户和元素3D空间Z平面之间的距离。而其效应由他的值来决定，值越小，用户与3D空间Z平面距离越近，视觉效果更令人印象深刻；反之，值越大，用户与3D空间Z平面距离越远，视觉效果就很小。

在3D变形中，对于某些变形，例如下面的示例演示的沿Z轴的变形，perspective属性对于查看变形的效果来说必不可少。

我们先来看一个简单的实例，制作一个扑克牌3D旋转效果，并且一个在扑克牌的父元素添加了视距perspective，而另一个却没有设置：

HTML

XML/HTML Code复制内容到剪贴板
  1.   
  2.     

      
  3.     

      
  
  •   
  •     

      
  •     

      
  •   

    CSS

    CSS Code复制内容到剪贴板
    1. div {   
    2.     width: 500px;   
    3.     height: 300px;   
    4.     margin: 30px auto;   
    5.     position: relative;   
    6.     background: url(images/bg-grid.jpg) no-repeat center center;   
    7.     background-size: 100% 100%;   
    8. }   
    9. div img {   
    10.     position: absolute;   
    11.     top: 50%;   
    12.     left: 50%;   
    13.     margin-left: -71px;   
    14.     margin-top: -100px;    
    15.     transform-origin: bottombottom;   
    16. }   
    17. div img:nth-child(1){   
    18.     opacity: .5;   
    19.     z-index: 1;   
    20. }   
    21. div img:nth-child(2){   
    22.     z-index: 2;   
    23.     transform: rotateX(45deg);   
    24. }   
    25. div:nth-of-type(2){   
    26.     perspective: 500px;   
    27. }  

    其效果如下：
    2016523113015422.png (389×493)

    上图的效果完全说明了一切。父节点没有设置perspective的情况下，梅花King的3D旋转效果不明显，而在父节点设置perspective后，梅花King才像个3D旋转。

    上例简单的演示了perspective的使用方法，我们回过头来，看看perspective的使用语法：

    CSS Code复制内容到剪贴板
    1. perspective：none |   

    perspective属性包括两个属性：none和具有单位的长度值。其中perspective属性的默认值为none，表示无限的角度来看3D物体，但看上去是平的。另一个值接受一个长度单位大于0的值。而且其单位不能为百分比值。值越大，角度出现的越远，从而创建一个相当低的强度和非常小的3D空间变化。反之，此值越小，角度出现的越近，从而创建一个高强度的角度和一个大型3D变化。

    比如你站在10英尺和1000英尺的地方看一个10英尺的立方体。在10英尺的地方，你距离立方体是一样的尺寸。因此视角转变远远大于站在1000英尺处的，立体尺寸是你距离立方体距离的百分之一。同样的思维适用于perspective的值。我们一起来看一个实例，来加强这方面的理解：

    HTML

    XML/HTML Code复制内容到剪贴板
    1.   
    2.       
    3.         1
      
  •         6
    •   
  •         4  
  •         3  
  •         5  
  •         2  
  •       
  •   
  •   
  •       
  •         1  
  •         6  
  •         4  
  •         3  
  •         5  
  •         2  
  •       
  •   

    • CSS

    CSS Code复制内容到剪贴板
    1. .wrapper {   
    2.     width: 50%;   
    3.     float: left;   
    4. }   
    5. .cube {   
    6.     font-size: 4em;   
    7.     width: 2em;   
    8.     margin: 1.5em auto;   
    9.     transform-style: preserve-3d;   
    10.     transform: rotateX(-40deg) rotateY(32deg);   
    11. }   
    12. .side {   
    13.     position: absolute;   
    14.     width: 2em;   
    15.     height: 2em;   
    16.     background: rgba(255, 99, 71, 0.6);   
    17.     border: 1px solid rgba(0, 0, 0, 0.5);   
    18.     color: white;   
    19.     text-align: center;   
    20.     line-height: 2em;   
    21. }   
    22. .front {   
    23.     transform: translateZ(1em);   
    24. }   
    25. .top {   
    26.     transform: rotateX(90deg) translateZ(1em);   
    27. }   
    28. .rightright {   
    29.     transform: rotateY(90deg) translateZ(1em);   
    30. }   
    31. .left {   
    32.     transform: rotateY(-90deg) translateZ(1em);   
    33. }   
    34. .bottombottom {   
    35.     transform: rotateX(-90deg) translateZ(1em);   
    36. }   
    37.   
    38. .back {   
    39.     transform: rotateY(-180deg) translateZ(1em);   
    40. }   
    41. .w1 {   
    42.     perspective: 100px;   
    43. }   
    44. .w2{   
    45.     perspective: 1000px;   
    46. }  

    效果如下图所示：
    2016523113110029.jpg (497×377)

    依据上面的介绍，我们可对perspective取值做一个简单的结论：

     1.perspective取值为none或不设置，就没有真3D空间。
     2.perspective取值越小，3D效果就越明显，也就是你的眼睛越靠近真3D。
     3.perspective的值无穷大，或值为0时与取值为none效果一样。
    为了更好的理解perspective属性，我们很有必要把他和translateZ的关系结合起来。其实也可以把perspective的值简单的理解为人的眼睛到显示器的距离，而translate就是3D物体距离源点的距离，下面引用W3C的一张图来解说perspective和translateZ的关系。
    2016523113153130.jpg (593×587)

    上图显示了perspective属性和translateZ的位置比例。要顶部的图，Z是半个d，为了使用原始圆（轮廓）看起来出现在Z轴上（虚线圆），画布上的实体圆将扩大两部，如浅蓝色的圆。在底部图中显示，圆按比例缩小，致使虚线圆出现在画布后面，并且z的大小是距原始位置三分之一。

    在3D变形中，除了perspective属性可以激活一个3D空间之外，在3D变形的函数中的perspective()也可以激活3D空间。他们不同的地方是：perspective用在舞台元素上（变形元素们的共同父元素）；perspective()就是用在当前变形元素上，并且可以与其他的transform函数一起使用。例如，我们可以把：

    CSS Code复制内容到剪贴板
    1. .stage {   
    2.     perspective: 600px  
    3. }  

    写成：

    CSS Code复制内容到剪贴板
    1. .stage .box {   
    2.     transform: perspective(600px);   
    3. }  

    来看一个简单示例：

    HTML

    XML/HTML Code复制内容到剪贴板
    1.   
    2.       
    3.         

        
    4.       
    5.   
    6.   
    7.       
    8.         

        
    9.       
    10.   

    CSS

    CSS Code复制内容到剪贴板
    1. .stage {   
    2.     width: 500px;   
    3.     height: 300px;   
    4.     margin: 30px auto;   
    5.     position: relative;   
    6.     background: url(images/bg-grid.jpg) no-repeat center center;   
    7.     background-size: 100% 100%;   
    8. }   
    9. .container {   
    10.     position: absolute;   
    11.     top: 50%;   
    12.     left: 50%;   
    13.     width: 142px;   
    14.     height: 200px;   
    15.     border: 1px dotted orange;   
    16.     margin-left: -71px;   
    17.     margin-top: -100px;    
    18. }   
    19. .container img{   
    20.     transform: rotateY(45deg);   
    21. }   
    22. .stage:nth-child(1) .container{   
    23.     perspective: 600px;   
    24. }   
    25. .stage:nth-child(2) img {   
    26.     transform:perspective(600px) rotateY(45deg);   
    27. }  

    效果如下所示：
    2016523113304121.jpg (439×556)

    上图效果可以看出，虽然书写的形式，属性名称不一致，但是效果却一样。

    虽然perspective属性和perspective()函数所起的功能是一样的，但其取值以及以运用的对像有所不同：

    1. perspective属性可以取值为none或长度值；而perspective()函数取值只能大于0，如果取值为0或比0小的值，将无法激活3D空间；
    2.perspective属性用于变形对像父元素；而perspective()函数用于变形对像自身，并和transform其他函数一起使用。
     

    perspective-origin属性

    perspective-origin属性是3D变形中另一个重要属性，主要用来决定perspective属性的源点角度。它实际上设置了X轴和Y轴位置，在该位置观看者好像在观看该元素的子元素。

    perspective-origin属性的使用语法也很简单：


    复制代码代码如下:perspective-origin：[ | | left | center | right | top | bottom] | [[ | | left | center | right] && [ | | top | center | bottom]]
    该属性的默认值为“50% 50%”(也就是center)，其也可以设置为一个值，也可以设置为两个长度值：

     第一个长度值指定相对于元素的包含框的X轴上的位置。它可以是长度值（以受支持的长度单位表示）、百分比或以下三个关键词之一：left（表示在包含框的X轴方向长度的0%），center（表示中间点）,或right（表示长度的100%）。
     第二个长度值指定相对于元素的包含框的Y轴上的位置。它可以是长度值、百分比或以下三个关键词之一：top（表示在包含框的Y轴方向长度的0%），center（表示中间点），或bottom（表示长度的100%）。
    注意，为了指转换子元素变形的深度，perspective-origin属性必须定义父元素上。通常perspective-origin属性本身不做任何事情，它必须被定义在设置了perspective属性的元素上。换句话说，perspective-origin属性需要与perspective属性结合起来使用，以便将视点移至元素的中心以外位置，如下图所示：
    2016523113336643.jpg (505×411)

    往往我们看一样东西不可能一直都在中心位置看，想换个角度，换个位置一看究竟，这个时候就离不开perspective-origin这个属性，下面来自于W3C官网的图可以简单阐述这一观点：
    2016523113359334.jpg (510×236)

    转载请注明：文章转载自 www.mshxw.com
    本文地址：https://www.mshxw.com/it/215883.html

    CSS教程相关栏目本月热门文章

    热门相关搜索
    路由器设置 木托盘 宝塔面板 儿童python教程 心情低落 朋友圈 vim 双一流学科 专升本 我的学校 日记学校 西点培训学校 汽修学校 情书 化妆学校 塔沟武校 异形模板 西南大学排名 最精辟人生短句 6步教你追回被骗的钱 南昌大学排名 清朝十二帝 北京印刷学院排名 北方工业大学排名 北京航空航天大学排名 首都经济贸易大学排名 中国传媒大学排名 首都师范大学排名 中国地质大学(北京)排名 北京信息科技大学排名 中央民族大学排名 北京舞蹈学院排名 北京电影学院排名 中国戏曲学院排名 河北政法职业学院排名 河北经贸大学排名 天津中德应用技术大学排名 天津医学高等专科学校排名 天津美术学院排名 天津音乐学院排名 天津工业大学排名 北京工业大学耿丹学院排名 北京警察学院排名 天津科技大学排名 北京邮电大学(宏福校区)排名 北京网络职业学院排名 北京大学医学部排名 河北科技大学排名 河北地质大学排名 河北体育学院排名
    学习工具
    代数计算器
    三角函数
    解析几何
    立体几何
    知识解答
    教育知识
    百科知识
    生活知识
    常识知识
    写作必备
    作文大全
    作文素材
    句子大全
    实用范文
    关于我们
    关于我们
    联系我们
    网站地图
    交流群

    名师互学网交流群

    名师互学网客服

    名师互学网客服

    名师互学网 版权所有 (c)2021-2022 ICP备案号：晋ICP备2021003244-6号

    我们一直用心在做
    关于我们 文章归档 网站地图 联系我们

    版权所有 (c)2021-2022 MSHXW.COM

    ICP备案号：晋ICP备2021003244-6号