自学前端-css之translate第五天

平面转换-2D转换

• 设置转换效果前，要给需要转换的属性添加translate属性.

1. 位移

• 属性名：transform:translate(x,y);
• transform:translateX(取值正负百分比(自身属性的百分比)或者正负像素值);
• transform:translateY(取值正负百分比(自身属性的百分比)或者正负像素值);
• 可以利用transform:translate(x,y)给绝对定位设置居中效果; {position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); }

2. 旋转

• 属性名：transform:rotate(取值正负数字deg);
• 2d旋转默认按照z轴中心旋转

3. 缩放

• 属性名：transform:scale(取值大于0(小于1缩小，大于1放大));

4. 复合属性 transform:translate(x,y) rote(deg) scale();

• 这里的属性顺序不能改变，因为旋转会改变坐标轴的轴向。
• 有多种转换效果是属性不能分开写，因为css有重叠性。

渐变

• 背景渐变效果 background-image:linear-gradiend(颜色1,颜色2);<可以取多个颜色>
• 背景会从颜色1到颜色2到。。。逐渐变化;
• 从透明到颜色渐变(比较常用)： background-image:linear-gradient(transparent,rgba(0,0,0,0));

空间转换-3D转换

1. 空间位移

• 属性名：transform:translate3D(x,y,z);
• transform:translateX(取值正负百分比(自身属性的百分比)或者正负像素值);
• transform:translateY(取值正负百分比(自身属性的百分比)或者正负像素值);
• transform:translateZ(取值正负百分比(自身属性的百分比)或者正负像素值);
• 在使用Z轴位移的时候，用户的视觉是不会产生变化的，需要给父级加上perspective(透视属性取值区间800px-1200px);

2. 空间旋转

• transform:rotateZ(取值正负数字deg);
• transform:rotateX(取值正负数字deg);
• transform:rotateY(取值正负数字deg);
• transform-rotate3d(x,y,z)用于自定义坐标轴取值0-1之间;

3. 空间缩放

• transforam:scale3d(x,y,z)
• transform:scaleX(取值大于0(小于1缩小，大于1放大));
• transform:scaleY(取值大于0(小于1缩小，大于1放大));
• transform:scaleZ(取值大于0(小于1缩小，大于1放大));

立体呈现属性：transform-style:preserve-3d;

给父元素添加，开启开启父元素中子级的3d效果

左手法则

判断旋转方向：左手握住旋转轴，拇指指向正值方向，手指弯曲方向为正值方向.

动画

• 实现动画的步骤
• 1. 定义动画

@keyframes 动画名称{ from{} to{} }

或者

@keyframes 动画名称{ 0%{} 50%{} 100%{} }

百分比代表动画总时长的占比

• 2. 调用动画

animation: name duration timing-function delay iteration-count direction fill-mode;

属性名:animation:动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时的状态;

• 动画名称和动画时长必须赋值，否则动画不会执行;
• 如果有两个时间第一个表示时长，第二个表示延迟;

属性值:

1. 动画名称：animation-name:;
2. 动画时长：animation-duration:;
3. 速度曲线:animation-timing-function:

• 1. linear | 动画从头到尾的速度是相同的;
• 2. steps(int) | 逐帧动画

4. 延迟时间：animation-delay:

• 取值数字s(默认0s);

5. 重复次数：animation-iteration-count:

• 1. 数字 | 定义应该播放多少次动画;
• 2. infinite | 指定动画播放无限次;

6. 动画方向:animation-direction:

• 1. normal | 默认值。动画按正常播放;
• 2. alternate | 动画反向播放;

7. 执行完毕时的状态：animation-fill-mode:

• 1. none | 默认值，无效果;
• 2. forwards | 停留最后一帧状态;
• 3. backwards | 第一帧状态;

8. 动画暂停：animation-play-state：

• 1. paused | 指定暂停动画，一般配合:hover使用;
• 2. running | 指定动画播放。

多组动画添加：

animation: name duration timing-function delay iteration-count direction fill-mode, name duration timing-function delay iteration-count direction fill-mode;

• 用逗号隔开添加多组动画。

跑马灯效果：

为了显示无缝连接，一般在列表的后面添加盒子显示的数量(盒子中能显示列表几个，从列表开头复制几个放在列表最后);