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>

 

posted @ 2018-08-29 22:58  你若精彩,蝴蝶自来  阅读(249)  评论(0编辑  收藏  举报