学习笔记（8）css2D、3D转换

原创已于 2022-09-06 09:43:03 修改 · 261 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #css3 #css

于 2022-04-05 00:22:11 首次发布

CSS 专栏收录该内容

10 篇文章

订阅专栏

本文深入探讨CSS的2D和3D转换，包括translate、rotate和scale等方法，以及3D转换中的rotateX、rotateY和rotateZ。通过示例代码展示如何使用这些变换来移动、旋转和缩放网页元素，同时介绍了transform-origin和perspective属性以控制变换的中心点和3D视距。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1，CSS 2D 转换

CSS 转换（transform属性）允许您移动、旋转、缩放和倾斜元素。

/*
transform：变形样式:
        translate：移动
        rotate：旋转，单位是度（deg°）。
        scale：缩放
*/

1.1，translate

translate：移动元素，两个参数分别代表横向偏移量（x轴）和纵向偏移量（y轴）。

transform: translate(50px,30px);

1.2，rotate

rotate：旋转元素，参数是旋转的度数。

参数如果是正数，则是顺时针旋转；如果是负数，则是逆时针旋转。

transform: rotate(30deg);

1.3，scale

scale：缩小/放大元素，两个参数分别代表横向缩放比（宽度）和纵向缩放比（高度）。

transform: scale(0.5,3.5);

改变被转换元素的位置，默认是中心点50%，50%。

transform-origin: 100% 100%;

2，CSS 3D 转换

transform属性，也可以使用以下3D 转换方法：

  rotateX()
  rotateY()
  rotateZ()

2.1，rotateX

rotateX()：使元素绕其 X 轴旋转给定角度。

.main {
  transform: rotateX(150deg);
}

2.2，rotateY

rotateY() ：使元素绕其 Y 轴旋转给定角度。

.main {
  transform: rotateY(120deg);
}

2.3，rotateZ

rotateZ()：使元素绕其 Z 轴旋转给定角度。

.main {
  transform: rotateZ(90deg);
}

perspective：属性定义了3d元素距离视图的间距，单位是像素。

perspective: 1000px;