2D变换
<!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>