移动端-转换transfrom和动画

一、平面转换transform

1.1  2D变换

平移（Translate）:

沿X轴或Y轴移动元素。
transform: translateX(20px); /* 仅沿X轴 */
transform: translateY(30px); /* 仅沿Y轴 */
transform: translate(40px, 50px); /* 沿X轴和Y轴 */
旋转（Rotate）:

围绕元素的中心点旋转。
transform: rotate(45deg); /* 旋转45度 */
缩放（Scale）:

改变元素的大小。
transform: scaleX(2); /* 仅沿X轴放大2倍 */
transform: scaleY(0.5); /* 仅沿Y轴缩小到原来的0.5倍 */
transform: scale(1.5, 0.8); /* 沿X轴放大1.5倍，沿Y轴缩小到0.8倍 */
倾斜（Skew）:

沿X轴或Y轴倾斜元素。
transform: skewX(20deg); /* 仅沿X轴倾斜 */
transform: skewY(20deg); /* 仅沿Y轴倾斜 */
transform: skew(20deg, 10deg); /* 沿X轴和Y轴倾斜 */

4个属性

1.平移(Translate)

双开门案例

2.旋转（Rotate）

改变旋转原点：

结合：

3.缩放

案例：播放

用定位 translate(-50%, -%50)的时候要注意复合起来

1.2  3D变换transform

三维变换
3D平移（Translate3d）:

沿X、Y、Z轴移动元素。
transform: translate3d(20px, 30px, 40px);
3D旋转（Rotate3d）:

围绕指定的X、Y、Z轴旋转。
transform: rotate3d(1, 1, 1, 45deg); /* 围绕一个对角轴旋转 */
矩阵（Matrix）:

使用一个4x4矩阵对元素进行更复杂的变换。
transform: matrix(a, b, c, d, e, f);
矩阵3D（Matrix3d）:

使用一个3D 4x4矩阵对元素进行变换。
transform: matrix3d(a, b, c, d, e, f, g, h, i, j, k, l, m, n, o, p);
透视（Perspective）:

为3D变换设置透视视图。
transform: perspective(500px); /* 设置透视点距离元素500px */
旋转沿任意轴（RotateX, RotateY, RotateZ）:

围绕X、Y、Z轴旋转。
transform: rotateX(45deg); /* 围绕X轴旋转 */
transform: rotateY(45deg); /* 围绕Y轴旋转 */
transform: rotateZ(45deg); /* 围绕Z轴旋转，等同于rotate(45deg) */
变换属性的注意事项
变换可以链式使用，例如 transform: translate(10px) rotate(45deg);.
3D变换需要浏览器支持CSS3，并在元素或其父元素上设置perspective属性。
过度的变换可能影响性能，特别是在移动设备上。
CSS变换提供了一种强大且响应式的方式来创建动态和交互式的用户界面，而无需JavaScript。

1、3D平移（Translate3d）

注意：直接父级

2、旋转

X轴，Y轴同理，加视距效果明显

案例：3d导航

二、渐变

1.1线性渐变 (Linear Gradient)

注意：属性中间加逗号

线性渐变 (Linear Gradient)
线性渐变可以是水平、垂直或沿对角线方向的，颜色沿着一条直线过渡。

background: linear-gradient(direction, color-stop1, color-stop2, ...);
direction：渐变的方向，可以是角度（如 45deg）、to 关键字（如 to bottom）或预定义的关键词（如 top, bottom, left, right）。
color-stop1, color-stop2, ...：颜色停止点，定义了渐变中的颜色和它们的位置。
示例：

background: linear-gradient(to right, red, blue);
这会创建一个从左到右，颜色从红色过渡到蓝色的渐变。

案例：

1.2径向渐变 (Radial Gradient)

径向渐变 (Radial Gradient)
径向渐变颜色从一点向外辐射变化。

background: radial-gradient(shape, size, color-stop1, color-stop2, ...);
shape：渐变的形状，可以是 circle 或 ellipse。
size：渐变的大小，可以是 closest-corner, farthest-corner, closest-side, farthest-side 或具体的长度值（如 50px）。
color-stop1, color-stop2, ...：颜色停止点。
示例：

background: radial-gradient(circle, red, blue);
这会创建一个从中心向外，颜色从红色过渡到蓝色的径向渐变。

重复渐变 (Repeating Gradients)
CSS3 还支持重复渐变，可以创建重复的颜色模式。

background: repeating-linear-gradient(direction, color-stop1, color-stop2, ...);
background: repeating-radial-gradient(shape, size, color-stop1, color-stop2, ...);

注意:

使用渐变的优点
节省图像：渐变可以替代某些图像，减少HTTP请求。
响应式：渐变可以根据元素的大小动态变化。
高性能：渐变通常比图像更快渲染。
兼容性和前缀
在一些旧的浏览器版本中，可能需要添加厂商前缀来支持渐变，如 -webkit-, -moz-, -o-, -ms-。现代浏览器已经原生支持无前缀的渐变。

示例
div {
  width: 200px;
  height: 200px;
  background: linear-gradient(to bottom right, #ff8c00, #308702);
}
这会创建一个从左上角到右下角，颜色从橙色过渡到绿色的渐变效果。

CSS渐变是一种强大的工具，可以用于创建复杂且富有吸引力的视觉效果，增强网页的美观度。

三、动画animation

CSS动画是CSS3的一个特性，它允许开发者在网页上创建动画效果，而无需使用JavaScript。CSS动画通过在特定时间内对元素的样式进行平滑的过渡来实现。以下是CSS动画的一些关键概念和用法：

动画属性

• @keyframes：定义动画的关键帧，即动画的开始、结束以及中间的各个阶段。
• animation-name：指定@keyframes规则的名称，以应用于元素。
• animation-duration：定义动画的持续时间。
• animation-timing-function：定义动画的速度曲线，即动画的速度如何随着时间变化。
• animation-delay：定义动画开始前的延迟时间。
• animation-iteration-count：定义动画的迭代次数，可以是具体数字或infinite表示无限次。
• animation-direction：定义动画的播放方向，可以是normal、reverse、alternate或alternate-reverse。
• animation-fill-mode：定义动画结束后元素的状态，可以是none、forwards、backwards或both。
• 
• 

@keyframes example {
  0% {
    background-color: red;
  }
  100% {
    background-color: yellow;
  }
}

div {
  width: 100px;
  height: 100px;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

使用CSS动画的优点

• 性能：CSS动画通常由浏览器优化，能够提供平滑的动画效果，并且性能较好。
• 简单性：CSS动画易于实现，不需要复杂的JavaScript代码。
• 响应性：CSS动画可以随着页面布局的变化自动调整。

注意事项

• 兼容性：一些旧的浏览器不支持CSS动画或只支持旧版本的CSS动画属性。
• 过度使用：动画应该谨慎使用，以免分散用户的注意力或引起不适。
• 性能测试：在不同的设备和浏览器上测试动画效果，确保它们运行流畅。

CSS动画是现代网页设计中不可或缺的一部分，能够为用户带来更加丰富和动态的体验。通过合理使用CSS动画，可以使网页更加生动和有趣。

案例：走马灯

案例：精灵图

从左跑到右