HTML5CSS3_day02

一、rotate与三角

2d旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转

使用步骤：

1. 给元素添加转换属性 transform
2. 属性值为 rotate(角度) 如 transform:rotate(30deg) 顺时针方向旋转30度 ``` div{ transform: rotate(0deg); }

### 三角
- 代码演示
![image-20200430133203222](https://gitee.com//qiaoyukeji/markdown_tupian/raw/master/markdown/20200430133212.png)

## 二、设置元素旋转中心点(transform-origin)
1. `transform-origin` 基础语法

transform-origin: x y;

2. 重要知识点
- 注意后面的参数 x 和 y 用空格隔开
- x y 默认旋转的中心点是元素的中心 (50% 50%)，等价于 `center`  `center`
- 还可以给 x y 设置像素或者方位名词(`top`、`bottom`、`left`、`right`、`center`)
## 三、旋转中心案例
- 
代码演示
<br />![image-20200430135839134](https://gitee.com//qiaoyukeji/markdown_tupian/raw/master/markdown/20200430135840.png)
<br />![image-20200430140000627](https://gitee.com//qiaoyukeji/markdown_tupian/raw/master/markdown/20200430140002.png)

<style>
    div {
        width: 200px;
        height: 200px;
        border: 1px solid pink;
        margin: 100px auto;
        overflow: hidden;
    }
    div::before {
        content: '黑马';
        width: 100%;
        height: 100%;
        display: block;
        background-color: hotpink;
        transform-origin: left bottom;
        transform: rotate(180deg);
        transition: all 0.5s;
    }
    div:hover::before {
        transform: rotate(0deg);
    }
</style>

## 四、`2D` 转换之 `scale` 缩放
1. 
`scale` 的作用
- 用来控制元素的放大与缩小
1. 
语法

transform: scale(x, y)

1. 
知识要点
- 注意，x 与 y 之间使用逗号进行分隔
- `transform: scale(1, 1)`: 宽高都放大一倍，相当于没有放大
- `transform: scale(2, 2)`: 宽和高都放大了二倍
- `transform: scale(2)`: 如果只写了一个参数，第二个参数就和第一个参数一致
- `transform:scale(0.5, 0.5)`: 缩小
- `scale` 最大的优势：可以设置转换中心点缩放，默认以中心点缩放，而且不影响其他盒子
1. 
代码演示

div:hover { / 注意，数字是倍数的含义，所以不需要加单位 / / transform: scale(2, 2) /

   /* 实现等比缩放，同时修改宽与高 */
   /* transform: scale(2) */
   /* 小于 1 就等于缩放*/
   transform: scale(0.5, 0.5)

}

## 五、图片放大案例
- 代码演示
![image-20200430141751050](https://gitee.com//qiaoyukeji/markdown_tupian/raw/master/markdown/20200430141752.png)

• 1
• 2
• 3
• 4
• 5
• 6
• 7

## 九、动画序列
- 代码演示
![image-20200430151722213](https://gitee.com//qiaoyukeji/markdown_tupian/raw/master/markdown/20200430151724.png)

```