第十三次课堂笔记

一.平移

在CSS3中，我们可以使用transform属性的translate()方法来实现元素的平移效果

二.旋转

语法：transform: rotate();共一个参数“角度”，单位deg为度的意思，正数为顺时针旋转，负数为逆时针旋转

rotateX(数值+角度deg) 绕x轴旋转

rotateY(数值+角度deg) 绕y轴旋转

rotateZ(数值+角度deg) 绕z轴旋转

透视 perspective（perspective 属性定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图。当为元素定义 perspective 属性时，其子元素会获得透视效果，而不是元素本身。）

 

 三.缩放

在CSS3中，我们可以使用transform属性的scale()方法来实现元素的缩放效果。缩放，指的是“缩小”和“放大”的意思。

 

 

四.扭曲

在CSS3中，我们可以使用transform属性的skew()方法来实现元素的倾斜效果。

 

 

 五.动画

通过 @keyframes 规则，您能够创建动画。

创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。

在动画过程中，您能够多次改变这套 CSS 样式。

以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。

0% 是动画的开始时间，100% 动画的结束时间。

为了获得最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。

语法：@keyframes animationname {keyframes-selector {css-styles;}}

animation 属性是一个简写属性，用于设置六个动画属性：

• animation-name
• animation-duration
• animation-timing-function
• animation-delay
• animation-iteration-count
• animation-direction