transform: 变形。改变
语法：transform: none|transform-functions;
旋转 rotate
- 2D 旋转：rotate(angle) 顺时针旋转给定的角度，允许负值
rotate(30deg) - 3D 旋转：rotate3d(x,y,z,angle)
- 沿着 X 轴的 3D 旋转：rotateX(angle)
- 定义沿着 Y 轴的 3D 旋转：rotateY(angle)
- 定义沿着 Z 轴的 3D 旋转：rotateZ(angle)
拉伸 skew
- 沿着 X 和 Y 轴的 2D 倾斜转换：skew(x-angle,y-angle)。举例：
skew(30deg,20deg) - 沿着 X 轴的 2D 倾斜转换：skewX(angle)
- 沿着 Y 轴的 2D 倾斜转换：skewY(angle)
缩放 scale
- 2D 缩放转换：scale(x,y)
- 通过设置 X 轴的值来定义缩放转换：scaleX(x)。举例：
scaleX(1)，实际效果相当于盒子被拉宽x倍，1的话就没有改变。 - 通过设置 Y 轴的值来定义缩放转换：scaleX(y)。
- 3D 缩放转换：scale3d(x,y,z)
- 通过设置 Z 轴的值来定义 3D 缩放转换：scaleZ(z)
开发中遇到的问题以及解决：
-
在开发中发现，画一个圆点，设置的宽高数值比较小时
width: 0.15rem; height: 0.15rem; border-radius: 50%;，发现圆形并没有那么圆。
猜想问题原因：个人认为是 js 对浮点数计算不精确，导致的。
解决办法1：调整宽高，比如：width：0.14rem; height: 0.14rem; （有时候能起作用，治标不治本）
解决办法2：设置 width: 15rem; height: 15rem; transform: scale(0.1); transform-origin: center center; （先放大，再缩小，比较好） -
突破浏览器限制字体大小不能低于12px的限制
p: {
font-size: 12px;
-webkit-transform: scale(0.75); /* 缩小至原的0.75倍 */
}
偏移 translate
- 2D 偏移：translate(x,y)
- 延 X 轴移动 translateX(x)
- 延 Y 轴移动 translateX(y)
- 3D 偏移：translate3d(x,y,z)
- 延 Z 轴移动 translateX(z)
各个浏览器兼容写法举例：
.box{
transform: translate(50px, 100px);
-ms-transform: translate(50px, 100px); /* IE 9 */
-webkit-transform: translate(50px, 100px); /* Safari游猎 和 Chrome谷歌 */
-o-transform: translate(50px, 100px); /* Opera */
-moz-transform: translate(50px, 100px);} /* Firefox */
矩阵 matrix
- 2D 转换，使用六个值的矩阵：matrix(n,n,n,n,n,n)，同做矩阵的方式实现所有的2D转换方法
- 3D 转换，使用 16 个值的 4x4 矩阵：matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)
矩阵解释起来有点长，它的作用也完全能被更好理解的其它方式代替，这里不展开介绍。
透视 perspective
- 为 3D 转换元素定义透视视图：perspective(n)
作用：perspective 属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。
注：perspective 属性只影响 3D 转换元素。
例子：
#father {
width: 100vw;
height: 100vh;
border: 1px solid #000;
position: relative;
display: flex;
justify-content: center;
align-items: center;
perspective: 100px;
perspective-origin: center center;
}
#child {
height: 100px;
width: 100px;
cursor: pointer;
position: absolute;
animation: mymove 3s linear 0s 1 normal;
background-color: aqua;
transform:
rotate3d(1, 0, 0, 360deg)
scale3d(1, 1, 2)
translate3d(0px, 0px, 10px);
}
-------------------------------------------
<div id="father">
<div id="child">看效果</div>
</div>
起点位置 transform-origin
改变起点位置 transform-origin: x-axis y-axis z-axis; 分别定义了，x轴、y轴、z轴的偏移量，允许负数。
- x-axis、y-axis 的值：
- 关键字[keyword]：top、left、center、right、bottom。
- 具体值：%、em、px等
- z-axis 的值：[length]
下面例子中的三种写法都是相等的,也是 transform-origin 的默认值：
#app {
transform-origin: center
transform-origin: center center 0
transform-origin: 50% 50% 0
}
关键字和百分比之间的对应关系：
- top = top center = center top = 50% 0
- right = right center = center right = 100%或(100% 50%)
- bottom = bottom center = center bottom = 50% 100%
- left = left center = center left = 0或(0 50%)
- center = center center = 50%或（50% 50%）
- top left = left top = 0 0
- right top = top right = 100% 0
- bottom right = right bottom = 100% 100%
- bottom left = left bottom = 0 100%
transition:允许CSS属性值在一定的时间区间内平滑的过渡，
需要事件的触发，例如单击、获取焦点、失去焦点等
transition:property duration timing-function delay;
- property: CSS的属性，例如：width|height|all 为 none 时停止所有的运动，可以为 transform
- duration: 持续时间
- timing-function: 过渡效果
可能的取值：- linear 匀速，等于 cubic-bezier(0,0,1,1)
- ease 块慢块，等于 cubic-bezier(0.25,0.1,0.25,1)
- ease-in 慢块，等于 cubic-bezier(0.42,0,1,1)
- ease-out 块慢，等于 cubic-bezier(0,0,0.58,1)
- ease-in-out 块慢块，等于 cubic-bezier(0.42,0,0.58,1)
- cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。
- delay: 延迟
注意：当 property 为 all 的时候，为所有变动添加过渡
例如：transition: all 2s ease 0s;