关于 rotate transform transition animation 属性的说明。
$(doms.list).css("transform",`translateX(-${index*100}%)`);
$(doms.list).css("transition","transform 0.5s"); 图片移动时间是多少
$(doms.list).css("transition","none"); 图片移动瞬间切换。 没有时间。
.rotate-animation {
width: 100px;
height: 100px;
background-color: red;
animation: rotate123 5s cubic-bezier(1, -0.39, 0, 1.47) ; /* rotate 5s linear infinite infinite是无限循环 */
}
@keyframes rotate123 {
from {
transform: rotate(0deg);
}
to {
transform: rotate(1800deg); /* 5圈 */
}
}
定义动画 转5圈。
<div style="margin-top: 159px;">
<img class="rotate-animation" src="/image/login-background.jpg">
</div>transform属性是CSS3中引入的一个功能强大的属性，它允许你对元素进行2D或3D转换，包括旋转、缩放、移动、倾斜等多种变换。以下是transform属性可以设置的一些常见值：
2D转换
translate(x, y)：设置元素的2D位移。
x和y参数分别指定了元素在水平方向和垂直方向上的移动距离。translateX(x)：设置元素在X轴上的位移。
translateY(y)：设置元素在Y轴上的位移。
scale(x[, y])：设置元素的2D缩放。
x和y参数分别指定了元素在水平方向和垂直方向上的缩放比例。如果省略y参数，则默认与x相同。scaleX(x)：设置元素在X轴上的缩放比例。
scaleY(y)：设置元素在Y轴上的缩放比例。
rotate(angle)：设置元素的2D旋转。
angle参数指定了旋转的角度，正值表示顺时针旋转，负值表示逆时针旋转。skew(x-angle, y-angle)：设置元素的2D倾斜。
x-angle和y-angle参数分别指定了元素在X轴和Y轴方向上的倾斜角度。skewX(angle)：设置元素在X轴方向上的倾斜角度。
skewY(angle)：设置元素在Y轴方向上的倾斜角度。
3D转换
translate3d(x, y, z)：设置元素的3D位移。
x、y和z参数分别指定了元素在X轴、Y轴和Z轴方向上的移动距离。translateX(x)、translateY(y)、translateZ(z)：分别设置元素在X轴、Y轴和Z轴方向上的位移（虽然这些在2D转换中也存在，但在这里是为了强调3D空间中的移动）。
scale3d(x, y, z)：设置元素的3D缩放。
x、y和z参数分别指定了元素在X轴、Y轴和Z轴方向上的缩放比例。scaleX(x)、scaleY(y)、scaleZ(z)：分别设置元素在X轴、Y轴和Z轴方向上的缩放比例（虽然这些在2D转换中也存在，但同样是为了强调3D空间中的缩放）。
rotate3d(x, y, z, angle)：设置元素在3D空间中的旋转。
x、y和z参数指定了旋转的轴（一个通过原点的向量），angle参数指定了旋转的角度。rotateX(angle)：设置元素沿着X轴的3D旋转。
rotateY(angle)：设置元素沿着Y轴的3D旋转。
rotateZ(angle)：设置元素沿着Z轴的3D旋转（这与2D的
rotate效果相同，但在3D空间中）。perspective(n)：为3D转换元素定义透视视图。
n参数指定了视点到元素平面的距离，这个距离决定了元素看起来有多大程度的“透视”或“立体”效果。transform-style: flat | preserve-3d：设置盒子是否按3D空间显示。
flat表示所有子元素在2D平面上进行变换，preserve-3d表示子元素在3D空间中保留其3D位置。transform-origin：设置变形的中心点。你可以指定一个或多个值来定义变换的原点位置。
backface-visibility：设置盒子背面是否可见。在3D变换中，当元素旋转时，其背面可能会变得可见或不可见。
这些transform属性的值提供了丰富的变换选项，允许你创建复杂的动画效果和视觉效果。然而，需要注意的是，transform属性可能会影响元素的布局和渲染性能，因此在使用时应谨慎考虑其影响。
站长微信:xiaomao0055
站长QQ:14496453