持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第21天，点击查看活动详情 本节课对css的高级功能有一个学习和了解

1. CSS transform 变形

• 对元素进行平移、旋转、缩放、倾斜
  • translate
  • rotate
  • scale
  • skew
• transform 不会对其它元素布局产生影响

.emoji {
    transform: translate (100px, 100px)
}
.emoji {
    transform: translateX (100px)
}

.emoji {
    transform: translateY (-1em)
}

.emoji {
    transform: translate (100%, 100%)
}

分析： 平移用translate函数表示，可以给translate传两个距离，让它在x和y轴上产生移动。不管怎么变，元素本身不会发生变化。

• 旋转

.emoji {transform:rotate (90deg)}
.emoji{transform:rotate (0. 5turn)}
.emoji {transform-origin: 0 0;transform:rotate (-50deg)}
.emoji{transform-origin: 0 0;transform:rotate (360deg)}

• 90deg表示顺时针旋转90度
• turn 表示一圈，0.5turn表示顺时针旋转半圈
  • 元素在旋转的时候，默认是绕着中心点旋转的
• transform-origin：改变元素旋转时的原点

对元素进行缩放:scale

scale可以传入一个放大的倍数，

.emoji {transform:scale (2)}
.emoji {transform:scale (3，0.5)}
    transform-origin: 0 0;
.emoji {transform:scale (4)}
.emoji {
    transform-origin: 0 0;
transform:scale (2)}

• scale (2)表示将元素放大到原来的2倍
• 给x和y方向上指定不同的倍数
• scale (3，0.5)：x轴方向上放大3倍，y轴方向缩小为原来的0.5倍。
• transform-origin: 0 0;变成了固定左上角，然后放大
• 指定某一轴的缩放
• scaleY（2）表示在y轴上放大到原来的二倍

2. transform过渡

transition 过渡

• 指定从一个状态到另一个状态时如何过渡
• 动画的意义：告诉用户发生了什么
• transition 属性
  • transition-property ：那个transition属性发生变化时需要过渡
  • transition-duration ：过渡效果需要持续多长时间
  • transition-timing-function ：变化时匀速的还是先快后慢还是先慢后快
  • transition-delay：立即开始变化还是有指定时间的延迟。

3. css animation

• 更复杂的动画效果
• animation
• 可以实现更复杂的样式变化效果
• 使用方法
  • 定义关键帧样式
  • 应用动画到元素上 这个技术可以实现更多的效果，也比较复杂。

总结

本节课主要学习了transform的相关属性和效果，了解了animation的功能，对css的学习也有了一个大概。以后可以开始学习JavaScript了。