CSS基础知识-2D变形02

现在这个视频课有好几个版本，我觉得我学不过来了！可是还是很着急！临阵磨刀的架势，也不知道保持微笑管不管用！

2D变形（transform）
1.移动translate(x,y)
2.缩放scale(x,y)
3.旋转rotate(deg)：可以对元素进行旋转，正数为顺时针，负数为逆时针；transform:rotate(30deg);单位deg是度数的意思。

    <style>
        img{
            margin:10px;
            border: 10px solid red;
            border-radius: 50%;
            transition: all 1s;
        }

        img:active{
            /*transform: rotateX(-180deg);*/
            /*transform: rotateY(-180deg);*/
            transform: rotate(-180deg);
        }
    </style>

调整元素旋转点的位置：transform-origin，值包括：x-axis;y-axis;z-axis;（分别为：定义视图被置于X轴何处，left;center;right;length;%；定义视图被置于Y轴何处，top;center;bottom;length;%；定义视图被置于Z轴的何处，length。）

    <style>
        img{
            margin:200px;
            border: 10px solid red;
            border-radius: 50%;
            transition: all 1s;
            /*改变中心点*/
            /*transform-origin: left top;*//*X轴左边，Y轴右边*/
            transform-origin: 100px 300px;
        }

        img:active{
            transform: rotate(180deg);
        }
    </style>

4.倾斜transform:skew(deg,deg);

    <style>
        img{
            transition: all 1s linear;
        }
        img:hover{
            /*transform: skewX(60deg);*/
            /*transform: skewY(69deg);*/
            transform: skew(-60deg,60deg);
        }
    </style>

案例！

<section>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</section>
</body>

    <style>
        section{
            width: 280px;
            height: 230px;
            margin: 200px auto;
            /*background-color: red;*/
            position: relative;
        }

        section div{
            width: 100%;
            height: 100%;
            background: #449fdb url("images/16sucai_201304301332.jpg") no-repeat -15px -10px;
            /*子绝父相*/
            position: absolute;
            left:0;
            top:0;
            /*改变旋转点*/
            transform-origin: center bottom;
            transition: all 1s linear;
        }
        section:hover div:nth-child(1){
            transform: rotate(15deg);
        }

        section:hover div:nth-child(2){
            transform: rotate(30deg);
        }
        section:hover div:nth-child(3){
            transform: rotate(45deg);
        }
        section:hover div:nth-child(4){
            transform: rotate(60deg);
        }
        section:hover div:nth-child(5){
            transform: rotate(75deg);
        }
        section:hover div:nth-child(6){
            transform: rotate(90deg);
        }
        section:hover div:nth-child(7){
            transform: rotate(105deg);
        }
        section:hover div:nth-child(8){
            transform: rotate(120deg);
        }
    </style>