开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的31天，点击查看活动详情

transform 概述

transform 是一个 CSS 属性，可以用来对元素应用 2D 转换。2D 转换包括缩放、旋转、倾斜和移动（平移）元素。

这里有一些使用 transform 应用 2D 转换的示例：

• scale(x, y)：按照 x 和 y 轴方向缩放元素。例如，transform: scale(2, 3) 将导致元素在 x 轴方向上放大为原来的两倍，在 y 轴方向上放大为原来的三倍。
• rotate(angle)：围绕一个点旋转元素。角度以度为单位指定。例如，transform: rotate(45deg) 将导致元素顺时针旋转 45 度。
• skew(x-angle, y-angle)：按照 x 和 y 轴方向倾斜元素。角度以度为单位指定。例如，transform: skew(10deg, 20deg) 将导致元素在 x 轴方向上水平倾斜 10 度，在 y 轴方向上垂直倾斜 20 度。
• translate(x, y)：在 x 和 y 轴方向上移动（平移）元素。距离以像素为单位指定。例如，transform: translate(50px, 100px) 将导致元素向右移动 50 像素，向下移动 100 像素。

你也可以通过用空格隔开来同时应用多个转换：

element {
  transform: scale(2, 3) rotate(45deg) skew(10deg, 20deg) translate(50px, 100px);
}

对于 rotate

需要注意的是，如果我们想按照某个圆心旋转，我们需要自行指定。

你可以使用 transform-origin 属性来指定旋转的圆心。这个属性接受两个参数，表示圆心的水平和垂直位置。参数可以是百分比，也可以是具体的像素值。

例如，如果你想让元素以它的中心旋转，你可以这样写：

element {
  transform: rotate(45deg);
  transform-origin: 50% 50%;
}

这会使元素以它的中心旋转 45 度。

你也可以使用具体的像素值来指定圆心位置，例如：

element {
  transform: rotate(45deg);
  transform-origin: 100px 200px;
}

这会使元素以 100 像素 到它的左边，200 像素 到它的顶部的位置为圆心旋转 45 度。

注意: 如果你没有指定 transform-origin，默认的圆心位置是元素的中心。

实例代码

<div id="source">现在你看到了</div>
<div id="copy"> 把鼠标 🖱️ 放在我上面 </div>

div{
  position: absolute;
  display: inline-block;
}

#source{
  width: 100px;
  height: 100px;
  background-color: rgb(112, 203, 87);
  border-radius: 8px;
}

#copy{
  width: 100px;
  height: 100px;
  background-color: rgb(247, 192, 80);
  border-radius: 8px;
  /* 因为添加了hover动画，所以，需要将 transition-duration 放在这里，防止hover导致动画突变 */
  transition-duration:1s; 
}

#copy:hover{
  transform:rotate(9deg) translate(20px,20px);
  -ms-transform:rotate(9deg) translate(20px,20px); /* Internet Explorer */
  -moz-transform:rotate(9deg) translate(20px,20px); /* Firefox */
  -webkit-transform:rotate(9deg) translate(20px,20px); /* Safari 和 Chrome */
  -o-transform:rotate(9deg) translate(20px,20px); /* Opera */
}