无需登录 数据私有 本地保存

CSS 3D 变换沙盒 - 平移旋转缩放与透视

CSS 开发工具 CSS 3D 变换 旋转 透视
57
0
0
0
术语英文定义与工具的关系
透视perspectiveCSS 属性，定义 3D 变换元素与观察者之间的距离，单位为像素。默认值为 none（无透视效果）。值越小，3D 透视效果越强烈（近大远小更明显）；值越大，效果越趋近于平行投影。透视属性需要应用在 3D 变换元素的父元素上。工具中的 Perspective 滑块（默认 500px）直接控制此属性，可通过滑块或鼠标滚轮调整。
透视原点perspective-originCSS 属性，定义观察者在透视空间中的位置，使用 X 和 Y 两个百分比值或长度值表示。默认值为 50% 50%（元素中心正前方）。调整透视原点可以模拟从不同角度观察 3D 物体的效果。工具提供 Perspective Origin X 和 Y 两个滑块（默认 50%），实时调整透视原点位置。
3D 变换样式transform-styleCSS 属性，指定子元素是否在 3D 空间中呈现。值为 flat 时子元素被扁平化到父元素的 2D 平面；值为 preserve-3d 时子元素保留 3D 位置关系。使用 CSS 3D 变换时通常需要设置为 preserve-3d。工具在生成的 CSS 代码中自动包含 transform-style: preserve-3d 属性，确保 3D 效果正确渲染。
旋转rotateX/Y/ZCSS transform 函数，分别绕 X 轴（水平轴）、Y 轴（垂直轴）、Z 轴（深度轴）旋转元素，单位为度（deg）。正值按右手定则方向旋转。三个轴可以组合使用，旋转顺序会影响最终结果。工具提供 RotateX、RotateY、RotateZ 三个滑块（-360 到 360 度），可独立或组合调整。
平移translateX/Y/ZCSS transform 函数，分别沿 X 轴（水平方向）、Y 轴（垂直方向）、Z 轴（深度方向）移动元素。单位可以是 px、em、% 等。translateZ 沿观察方向移动，正值使元素靠近观察者，负值使其远离。工具提供 TranslateX、TranslateY、TranslateZ 三个滑块，实时预览平移效果。
缩放scaleX/Y/ZCSS transform 函数，分别在 X 轴、Y 轴、Z 轴方向上缩放元素。值为 1.0 表示原始大小，大于 1.0 放大，小于 1.0 缩小。三个轴可以独立缩放，实现非等比缩放效果。工具提供 ScaleX、ScaleY、ScaleZ 三个滑块（0.1 到 3.0），支持非等比缩放调试。
变换原点transform-originCSS 属性，定义变换操作的基准点，默认为 50% 50%（元素中心）。旋转、缩放等变换都围绕此点进行。改变变换原点会显著影响旋转和缩放的视觉效果。工具在生成的代码中包含 transform-origin 属性，可在代码中进一步调整。
transform 函数transformCSS 属性，应用 2D 或 3D 变换到元素。可以组合多个变换函数，如 translateX() rotateY() scale() 等，变换从右到左依次应用。多个变换函数之间用空格分隔。工具将所有参数组合生成完整的 transform 属性值，可一键复制使用。
背面可见性backface-visibilityCSS 属性，控制元素背面是否可见。值为 visible 时背面可见，值为 hidden 时背面隐藏。在实现卡片翻转等效果时，通常需要将翻转面的背面可见性设为 hidden。工具的立方体各面默认背面可见，开发者可在实际项目中根据需要设置 backface-visibility。
3D 空间3D Space指 CSS 中通过 perspective 和 transform-style: preserve-3d 创建的三维坐标系，包含 X 轴（水平）、Y 轴（垂直）和 Z 轴（深度）三个方向。在此空间中，元素可以进行三维变换和层次嵌套。工具的预览窗口模拟了一个 3D 空间环境，用户可以在其中观察和调试 3D 变换效果。
🔧 相关工具