过渡、偏移、旋转

过渡

/* transition: all linear 1s; */

​ /* 过渡的属性：（不支持display：none的过渡效果） */

​ /* 适用范围：（尺寸、颜色、透明度） */

​ /* 取值：一个、多个、全部（all） */

​ transition-property:width background-color；

​ /* 过渡效果：

​ 取值：

​ ease 默认 匀速 （常用）

​ ease-in 由慢到快

​ ease-out 由快到慢

​ ease-in-out 由慢到快再到慢

​ linear 线性 */

​ transition-timing-function: ease;

​ /* 过渡时间 */

​ transition-duration: 500ms;

​ /* 过渡的延迟效果（让一个图形现出来，另一个再出来） */

​ transition-delay:1000ms;

变形

div:hover{

background: orangered;

/* transform 变形

scale缩放：

取值：

0-1是缩小

1以上是放大（不会影响布局，但是会覆盖） */

/* transform: scale(2); */

/* transform 变形

skew倾斜

取值：（角度）：

正值：逆时针倾斜

负值：顺时针倾斜

*/

transform: skew(-45deg);

}

旋转

div:hover>p{

/* rotate 旋转

取值（角度）：

Z轴（默认值 对着自己那根轴）

正值：顺时针旋转

负值：逆时针旋转 */

/* transform: rotateY(180deg); */

}

偏移

/* transform 变形

translate 偏移

取值：

第一个值是X轴偏移量（正向右，负向左）

第二个值是Y轴偏移量（正向下，负向上）

注：两个值之间的分隔符是逗号

再注：只要给小括号内多个值，分隔符都是逗号 */

transform: translate(100px,100px);

旋转：

width:0;

height:0;

border: 50px solid transparent;

border-top-color: blue; 以上为形成三角形的代码

transform-origin: 50% 25%; 旋转的代码

以上全部为 以三角形中心点为旋转点旋转