变换与关键帧

最新推荐文章于 2024-11-16 13:45:27 发布

开心就来soul

最新推荐文章于 2024-11-16 13:45:27 发布

阅读量315

点赞数 5

文章标签： css html 前端 javascript css3

本文链接：https://blog.csdn.net/m0_67316947/article/details/123563459

版权

本文介绍了CSS3中平移、旋转、缩放和扭曲的基本用法，包括translate(), rotate(), scale(), skew()函数，并讲解了如何使用关键帧定义动画效果，如动画名称、持续时间、方向等。

摘要由CSDN通过智能技术生成

变换

平移：transform：translate(x , y);

translateX(数值) 水平移动

translateY(数值) 垂直移动

旋转：transform： rotate(数值+deg);

rotateX(数值deg) 绕x轴旋转

rotateY(数值deg) 绕y轴旋转

rotateZ(数值deg) 绕z轴旋转

缩放：transform:scale(x , y);

scaleX(值) 水平缩放

scaleY(值) 垂直缩放

scale(值) 一个值时是等比例缩放

扭曲：transform:skew(数值+deg);

skewX(数值+deg) x方向扭曲

skewY(数值+deg) y方向扭曲

关键帧：

定义关键帧
@keyframes name{
from{}
to{}

也可以百分比
属性值： animation-name: name;/*名称*/
animation-duration: 1s;/*动画的持续时间*/
/*animation-timing-function: linear;*/
/*animation-timing-function: steps(10);/*步数*/
/*animation-delay: 1s;/*延迟*/
animation-iteration-count: infinite;/*动画的播放次数*/
animation-direction: alternate;动画的运动方向
缩写:
animation:name（名称）s(时间）linear（速度）alternate（方向）；