---
weight: 7
type : docs
bookFlatSection : false
---
### 自动旋转效果

在"模板"的style中加入以下样式
```
@-webkit-keyframes spin {
    from {-webkit-transform: rotate(0deg);}
    to {-webkit-transform: rotate(360deg);}
}
@keyframes spin {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}

.Rotate {
    -webkit-animation: spin 3s linear 3s 5 alternate;
    animation: spin 3s linear infinite;
}
```
如需任意组件自动旋转, 只需将Rotate这个类给到这个组件即可, 比如图形
```
<img class="Rotate" src="https://www.smartchart.cn/media/editor/smc162_20220407150432307320.png">
```

### 组件变形
常见变形沿着Y轴, 其它变形方式自已搜索, 比如需要0号,1号图形变形的样式写法
```
#container_0{transform:skewY(10deg);}
#container_1{transform:skewY(-10deg);}

```

效果如下:
![输入图片说明](https://images.gitee.com/uploads/images/2022/0407/161743_2664154b_5500438.png "屏幕截图.png")