Rotate 旋转

对应文件

@vusui/css/lib/rotate.css

size 值表
45 90 135 180 225 270 315 360

基础用法

使用 vus-rotate-{size} 或者 vus-rotate--{size} 类，添加元素旋转效果。

vus-rotate-45

vus-rotate-90

vus-rotate-135

vus-rotate-180

vus-rotate-270

vus-rotate--45

vus-rotate--90

vus-rotate--135

vus-rotate--180

vus-rotate--270

<!-- 顺时针旋转 -->
<div class="vus-rotate-45"></div>
<div class="vus-rotate-90"></div>
<div class="vus-rotate-135"></div>
<div class="vus-rotate-180"></div>
<div class="vus-rotate-225"></div>
<div class="vus-rotate-270"></div>
<div class="vus-rotate-315"></div>
<div class="vus-rotate-360"></div>

<!-- 逆时针旋转 -->
<div class="vus-rotate--45"></div>
<div class="vus-rotate--90"></div>
<div class="vus-rotate--135"></div>
<div class="vus-rotate--180"></div>
<div class="vus-rotate--225"></div>
<div class="vus-rotate--270"></div>
<div class="vus-rotate--315"></div>
<div class="vus-rotate--360"></div>

其它用法

样式名称	描述
vus-rotate-0	清除旋转
vus-rotate-x-0	清除 X 轴旋转
vus-rotate-y-0	清除 Y 旋转
vus-rotate-x-180	X 轴旋转 180deg
vus-rotate-y-180	Y 轴旋转 180deg

<div class="vus-rotate-0"></div>
<div class="vus-rotate-x-0 "></div>
<div class="vus-rotate-y-0"></div>
<div class="vus-rotate-x-180"></div>
<div class="vus-rotate-y-180"></div>

响应式方案

响应式预设了四个响应尺寸：

分辨率	≥567px	≥768px	≥1024px	≥1280px
基础用法	vus-rotate-xs-*	vus-rotate-sm-*	vus-rotate-md-*	vus-rotate-lg-*
逆时针旋转	vus-rotate-xs--*	vus-rotate-sm--*	vus-rotate-md--*	vus-rotate-lg--*

<div
  class="vus-rotate-45 vus-rotate-xs-90 vus-rotate-sm-135 vus-rotate-md-180 vus-rotate-lg-360"
></div>
<div
  class="vus-rotate--45 vus-rotate-xs--90 vus-rotate-sm--135 vus-rotate-md--180 vus-rotate-lg--360"
></div>