2D变换transform
1、平移:translate
/* 第一个参数: x轴的平移量,正方向向右 */
/* 第二个参数: y轴的平移量,正方向向下 */
transform: translate(100px, 200px);
/* 填一个参数的话,只有横坐标进行了平移 */
transform: translate(100px);
/* translateX x轴上平移 */
/* transform: translateX(300px);
transform: translateY(300px);
transform: translateZ(300px); */
2、旋转:rotate
/* 参数代表旋转的角度
代表角度的单位是 deg
代表弧度的单位是 rad
*/
/* 元素的旋转角度是参考的元素的正上方 */
/* 顺时针旋转为正方向 */
/* 旋转中心默认为元素中心 */
transform: rotate(30deg);
/*transform: rotateX(30deg);
transform: rotateY(30deg);
transform: rotateZ(30deg); */
3、缩放:scale
/* 参数代表的是缩放比例,值为1 则为原始大小 */
transform: scale(1, 0.5);
/* 参数只写一个,代表的是水平和竖直方向缩放相同的比例 */
transform: scale(3);
/* 负数代表的就是在指定轴上的镜像 */
transform: scale(-0.5, 1);
transform: scaleX(2);
transform: scaleY(2);
transform: scaleZ(2);
/* 隐藏元素的方法:将缩放调为0 */
transform: scale(0);
4、倾斜:skew
/* skew 倾斜 */
/* 第一个参数: 水平轴的倾斜度数 */
/* 第二个参数: 竖直轴的倾斜度数 */
transform: skew(0, 30deg);
/* 只设置一个参数 则只有水平轴倾斜有效 */
transform: skew(30deg);
transform: skewX(30deg);
transform: skewY(30deg);
同时设置多个变换属性,用空格隔开
transform: rotate(180deg) translateX(100px) scale(0.5);
5、变化的原点
/* 设置transform的原点 */
/* 原点的位置会影响旋转的圆心,缩放的位置 */
/* 值的带选项:center, top, bottom, left, right, 还可以写具体的长度值 */
/* transform-origin: center; */
transform-origin: right bottom;
/* 原点若x值和y值都为0,代表的是元素左上角的位置 */
/* 第一参数值代表横向移动的距离,正数代表向右移动,负数代表向左移动 */
/* 第二参数值代表纵向移动的距离,正数代表向下移动,负数代表向上移动 */
transform-origin: 50px 100px;
transform: rotate(0deg);
/* 变换原点还会影响缩放的位置 */
transform-origin: left top;
transform: scaleY(1);
6、浏览器兼容性的前缀
/* 谷歌浏览器可以识别该属性 */
-webkit-transform: translate(100px, 120px);
/* 火狐浏览器可以识别该属性 */
-moz-transform: translate(100px, 120px);
/* 市面上现在流行使用postCss来解决css样式兼容性问题 */
过渡动画transition
/* 什么是transition? */
/* transition是过渡的意思,将会时元素从一个状态用动画形式过渡到零一个状态 */
/* 参考:https://developer.mozilla.org/zh-CN/docs/Web/CSS/transition */
/* 使用过渡属性 */
transition: all 2s linear;
/* transition复合属性可以拆解成以下属性 */
/* 过渡属性:声明一个需要产生过渡动画的属性 */
/* 可以同时声明多个属性,属性之间用逗号隔开 */
/* 待选项:
all: 代表所有属性
none: 没有任何属性
*/
transition-property: opacity, transform;
transition-property: all;
/* 动画的时长 */
transition-duration: 1s;
transition-duration: 1000ms;
/* 动画的速度曲线 */
/* 带选项:
linear: 匀速播放动画
ease-in: 慢进匀速出
ease-out: 匀速进慢出
ease-in-out: 慢进慢出
steps(n): 声明有n个过渡阶段
*/
transition-timing-function: linear;
/* 除了使用预制带选项,也可以手动赋值如下: */
transition-timing-function: cubic-bezier(0.76, 0.19, 0.19, 0.8);
/* steps 函数 */
transition-timing-function: steps(5);
/* 延迟播放动画的时间 */
transition-delay: 1s;
animation动画
/* 动画名称 */
/* 作用:用于告诉浏览器,该动画应用哪一个动画关键帧序列 */
animation-name: move;
/* 动画播放时长 */
animation-duration: 2s;
/* 动画播放的速度曲线 */
animation-timing-function: linear;
/* 延迟播放的时间 */
/* animation-delay: 1s; */
/* 动画播放次数 */
/* 带选项:
infinite: 无限循环播放
*/
/* animation-iteration-count: infinite; */
/* animation-iteration-count: 2; */
/* 动画播放方向 */
/* 带选项:
normal:正向播放
reverse: 反向播放
alternate: 正向播放一次然后反向再播放一次
alternate-reverse: 反向播放一次然后正向再播放一次
*/
/* animation-direction: alternate-reverse; */
/* 播放结束后,元素的最终状态模式 */
/*
带选项:
forwards:动画播放完后,保留最后一帧的状态
backwards:动画播放完后,保留第一帧的状态
both:动画播放完后,保留第一帧和最后一帧的状态和
*/
animation-fill-mode: forwards;
/* 可以定义复合属性,取代上面的所有属性 */
/* 赋值顺序,可以参考如下顺序 */
/* duration | timing-function | delay | iteration-count | direction | fill-mode | play-state | name */
/* duration | timing-function | delay | name */
/* duration | name */
animation: move 2s linear 0s forwards;
}
/* 关键帧:动画播放时的几个关键状态 */
/* 序列:有序的队列 */
/* 定义一个关键帧序列 如下: */
/* 使用@keyframes定义关键帧序列,后面参数为:动画名 */
@keyframes move {
/* 起始状态 */
/* from { */
0% {
transform: translateX(0);
color: #000;
font-size: 16px;
}
/* 用百分比定义中间状态 */
50% {
transform: translateX(1000px);
color: pink;
font-size: 32px;
}
/* 结束状态 */
/* to { */
100% {
transform: translateX(500px);
color: green;
font-size: 64px;
}
}