2D变换
Posted caicaihong
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>
以上是关于2D变换的主要内容，如果未能解决你的问题，请参考以下文章