<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
html{
height: 100%;
overflow: hidden;
}
body{
height: 60%;
width: 60%;
border: 1px solid;
margin: 100px auto;
overflow: hidden;
}
#test{
height: 200px;
width: 200px;
border-radius: 50%;
border: 1px solid;
position: absolute;
font: 40px/200px "微软雅黑";
text-align: center;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
body:hover #test{
/*transform: translate(300px,300px);*/
/*transform: scaleX(1.5);*/
transform: rotate(130deg);
}
/*
1、translate(x,y):
左右移动，单位是px,有两个值，
x，y 表示左/右，上/下
一个值的时候表示x值,
transform: translate(300px,300px);
表示右下方向移动
translateX(x) 定义X轴的
translateY(y)定义Y轴的
2、scale(x,y) 定义2D缩放转换
无单位，数字表示，数字代表缩放多少倍
如果只填一个值的时候，代表了x和y值一样，赋予了两个值
transform: scaleX(1.5) 代表X和Y都是放大1.5倍，如果要缩小，则改为负数
scaleX(x) 代表通过设置 X 轴的值来定义缩放转换 缩放X轴的转换
scaleY(y) 通过设置 Y 轴的值来定义缩放转换。 缩放Y轴的转换
3、rotate(angle) 定义 2D 旋转，在参数中规定角度。
rotate(<a> [<x> <y>])变换函数指定由旋转a给定旋转度数
如果可选参数x，并y没有提供，则旋转是当前用户的坐标系的原点（就是中心点）。
如果可选参数x和y提供的，该旋转是关于点(x, y)。
4、skew(x-angle,y-angle)定义沿着 X 和 Y 轴的 2D 倾斜转换。
skewX(angle) 定义沿着 X 轴的 2D 倾斜转换。
skewY(angle) 定义沿着 Y 轴的 2D 倾斜转换。
* */
</style>
<body>
<div id="test">
Rainbow
</div>
</body>
</html>
原文：https://www.cnblogs.com/caicaihong/p/9557512.html