transform三大属性之rotate
其他：transform三大属性rotate、scale、translate
菜鸟实例
rotate(angle)定义2D旋转 ——原点为基点
rotateX(angle)X ——X轴为基点
rotateY(angle)Y ——Y轴为基点
transform: rotate3d(x,y,z,angle)定义3d旋转 ——（x,y,z）为基点 +旋转角度
CSS
/* rotate(45deg) */.rotate:hover .fill {-webkit-transform: rotate(45deg);transform: rotate(45deg);}/* rotateX(45deg) */.rotateX:hover .fill {-webkit-transform: rotateX(45deg);transform: rotateX(45deg);}/* rotateY(45deg) */.rotateY:hover .fill {-webkit-transform: rotateY(45deg);transform: rotateY(45deg);}/* rotateZ(45deg) */.rotateZ:hover .fill {-webkit-transform: rotateZ(45deg);transform: rotateZ(45deg);}
完整代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>transform</title><style>body {background: #F5F3F4;margin: 0;padding: 10px;font-family: 'Open Sans', sans-serif;text-align: center;}.card {display: inline-block;margin: 10px;background: #fff;padding: 15px;min-width: 200px;box-shadow: 0 3px 5px #ddd;color: #555;}/* 背景 */.card .box {width: 100px;height: 100px;margin: auto;background-color: #ddd;cursor: pointer;box-shadow: 0 0 5px #ccc;-webkit-perspective: 1000px;-moz-perspective: 1000px;perspective: 1000px;}.card .box .fill {width: 100px;height: 100px;position: relative;transform-origin: center;-webkit-transition: 0.3s;transition: 0.3s;background-color: skyblue;}/* rotate(45deg) */.rotate:hover .fill {-webkit-transform: rotate(45deg);transform: rotate(45deg);}/* rotateX(45deg) */.rotateX:hover .fill {-webkit-transform: rotateX(45deg);transform: rotateX(45deg);}/* rotateY(45deg) */.rotateY:hover .fill {-webkit-transform: rotateY(45deg);transform: rotateY(45deg);}/* rotateZ(45deg) */.rotateZ:hover .fill {-webkit-transform: rotateZ(45deg);transform: rotateZ(45deg);}/* transform: rotate3d(x,y,z,angle);*//* 角度为整数表示顺时针，角度为负表示逆时针 */.rotate3d:hover .fill {-webkit-transform: rotate3d(1, 0, 1, -180deg);transform: rotate3d(1, 0, 1, -180deg);}</style>
</head><body><!-- transform三大属性：rotate(旋转)scale(缩放)translate(移动)其他属性：skew(扭曲)matrix(矩阵变形)语法：transform：rotate | scale | skew | translate |matrix;一、旋转rotaterotate(angle)定义2D旋转 rotateX(angle) rotateY(angle) rotateZ(angle) rotate3d(angle)定义3d旋转--><!-- rotate(45deg) --><div class="card"><div class="box rotate"><div class="fill"></div></div><p>rotate(45deg)</p></div><!-- rotateX(45deg) --><div class="card"><div class="box rotateX"><div class="fill"></div></div><p>rotateX(45deg)</p></div><!-- rotateY(45deg) --><div class="card"><div class="box rotateY"><div class="fill"></div></div><p>rotateY(45deg)</p></div><!-- rotateZ(45deg) --><div class="card"><div class="box rotateZ"><div class="fill"></div></div><p>rotateZ(45deg)</p></div>
</body></html>
transform: rotate3d(1, 0, 1, -180deg);顺时针旋转消失
