css3(5)

2D转换之移动

<style>
        div {
            width: 200px;
            height: 200px;
            background-color: #090;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
        }
    </style>

2D转换之旋转

 <style>
        div {
            width: 200px;
            height: 200px;
            background-color: #090;
            margin: 100px auto;
            transform-origin: top left;  /*旋转中心点，top left没有顺序之分*/
        }


        div:hover {
            transform: rotate(45deg);  /*默认是按中心旋转*/
        }

    </style>

2D转换之缩放

<style>
        div {
            width: 200px;
            height: 200px;
            background-color: #090;
            margin: 100px auto;
            /*transform-origin: top left;/*旋转中心点*/
        }


        div:hover { 
            transform: scale(0.5);  /*x轴y轴缩放比例都是0.5*/
        }
    </style>

2D转换之斜切

<style>
        div {
            width: 200px;
            height: 200px;
            background-color: #090;
            margin: 100px auto;
            /*transform-origin: top left;/*旋转中心点*/
        }


        div:hover {
            /*transform: rotate(45deg); 默认是按中心旋转*/
            /*transform: scaleX(0.5);*/  /*x轴y轴缩放比例都是0.5*/
            transform: skew(8deg, 10deg);
        }
    </style>