请选择 进入手机版 | 继续访问电脑版

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 89|回复: 0

CSS 中的 3D 转换函数

[复制链接]

1

主题

0

回帖

5

积分

新手上路

积分
5
发表于 2024-1-23 12:03:56 | 显示全部楼层 |阅读模式
在本文中,我将展示如何使用 CSS 中新的 3D 转换函数和属性向网页和应用程序添加另一个维度。我们将研究变换、平移、旋转、缩放、透视等,以及与 z-index 相关的问题、浏览器陷阱以及这些功能的最佳用例。 元素可以在三个维度上进行转换: 水平 x 轴 垂直 y 轴,以及 深度 z 轴 在二维屏幕上,将表面视为 z 坐标零是很有用的。正 z 值会将对象移向您(在屏幕前面),而负 z 值会将对象移开(在屏幕后面)。添加透视后,更远的 z 值可能会导致对象完全消失。 这里有一些事情需要注意: CSS只能在三维空间中变换二维HTML元素。元素本身保持平坦且深度为零。可以在 z 平面上缩放,但这不会将正方形挤压成立方体。您仍然可以创建立方体,但需要六个元素来制作每一面。


CSS 3D 转换非常适合页面效果 - 但不要指望您能够创建下一个《我的世界》或《使命召唤》。使用WebGL等技术可以更好地实现复杂模型。 Learn to Code with JavaScript 所有现代浏览器(IE10+)都很好地支持3D 转换,但是: Internet Explorer 不支持transform-style: preserve-3d,这使得 WhatsApp 号码数据 无法创建 3D 场景。 所有版本的 Safari 都必须使用供应商前缀-webkit-backface-visibility来隐藏背面。所有其他浏览器都支持backface-visibility. 以下部分描述 3D 变换属性和功能。演示页面说明了大多数的使用方式。 该transform物业 任何元素都可以应用单个transform属性。可以为它分配一个带有一个或多个参数的函数。例如如果需要两个或多个转换,可以定义任意数量的空格分隔函数 例如,要在水平面缩放并垂直变换最后,transform: none;删除所有现有的转换。




平移(移动)功能 您可能使用过translate函数沿 x 轴水平移动元素或沿 y 轴垂直移动元素 可以使用任何长度单位。百分比参考转换后元素的大小,因此translateY(80%)应用了 100 像素高的块会将其向下移动 80 像素。 进入三维,我们还可以使用 给定三个元素 、绝对定位在同一位置。结果相当平淡: 非旋转场景 然而,如果我们旋转整个外部#scene容器,z 轴变换就会变得更加明显 旋转场景 简写translate3d函数允许元素沿所有三个轴相应移动 财产 默认情况下(并且始终在 IE 中)设置为flat. 这表明元素的所有变换子元素都位于元素本身的平面内。换句话说,内部元素可以应用任何变换,但它们会被挤压到容器的平面中: 平面风格 在大多数情况下,transform-style: preserve-3d;必须用于指示子元素位于 3D 空间中,并且容器的任何变换都将相应地变换。

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表