移动

左移动

上移动

下移动

右移动

旋转

中心点旋转

右下角旋转

左下角旋转

右上角旋转

左上角旋转

自定义点位旋转

缩放

鼠标上来缩小1倍

鼠标上来放大1倍

鼠标上来翻转

动画

看我得截图

3D旋转

X翻

Y翻

Z翻

指定轴翻

3D移动

XYZ移动

透视XYZ移动

查看本章HTML

<div  class="container">
    <div class="box-group">
        <div id="boxA1"  class="box transition">左移动</div>
        <div id="boxA2"  class="box transition">上移动</div>
        <div id="boxA3"  class="box transition">下移动</div>
        <div id="boxA4"  class="box transition">右移动</div>
    </div>
    <div class="box-group">
        <div id="boxB1"  class="box transition">中心点旋转</div>
        <div id="boxB2"  class="box transition">右下角旋转</div>
        <div id="boxB3"  class="box transition">左下角旋转</div>
        <div id="boxB4"  class="box transition">右上角旋转</div>
        <div id="boxB5"  class="box transition">左上角旋转</div>
        <div id="boxB6"  class="box transition">自定义点位旋转</div>
    </div>
    <div class="box-group">
        <div id="boxC1"  class="box transition">鼠标上来缩小1倍</div>
        <div id="boxC2"  class="box transition">鼠标上来放大1倍</div>
        <div id="boxC3"  class="box transition">鼠标上来翻转</div>
    </div>
    <div class="box-group">
        <div id="boxD1"  class="box transition"></div>
    </div>
    <div class="box-group">
        <div class="box transition boxE1">X翻</div>
        <div class="box transition boxE2">Y翻</div>
        <div class="box transition boxE3">Z翻</div>
        <div class="box transition boxE4">指定轴翻</div>
    </div>
    <div class="box-group">
        <div class="box transition boxF1">XYZ移动</div>
    </div>
    <div class="box-group perspective">
        <div class="box transition boxF1">透视XYZ移动</div>
    </div>

</div>

列

CSS

    .container{
        border-radius: 10px;
        width: 80%;
    }

    .container .box-group{
        border-bottom: 1px #a9bac5 solid;
    }


    .box{
        display: inline-block;
        margin: 10px 5px;
        width: 100px;
        height: 100px;
        background: #69d0e7;
        text-align: center;
        font-size: 10px;
        line-height: 100px;
    }

    /*过渡*/
    .transition{
        transition: all 1s ease;
    }

    .box-group div:hover{
        background: #66dccb;
        border-radius: 50%;
    }

    #boxA1:hover{
        transform: translateX(-50px);
    }
    #boxA2:hover{
        transform: translateY(-50px);
    }
    #boxA3:hover{
        transform: translateY(50px);
    }
    #boxA4:hover{
        transform: translateX(50px);
    }


    #boxB1:hover{
        transform: rotate(720deg);
    }
    #boxB2:hover{
        transform: rotate(360deg);
        transform-origin: right bottom;
    }
    #boxB3:hover{
        transform: rotate(360deg);
        transform-origin: left bottom;
    }
    #boxB4:hover{
        transform: rotate(360deg);
        transform-origin: right top;
    }
    #boxB5:hover{
        transform: rotate(360deg);
        transform-origin: left top;
    }
    #boxB6:hover{
        transform: rotate(360deg);
        transform-origin: 10px 80px;
    }                                                                                       


    #boxC1:hover{
        transform: scale(0.5);
    }
    #boxC2:hover{
        transform: scale(2);
    }


    #boxC3:hover{
        transform: scale(-2);
    }


    #boxD1{
        animation-name: run;
        animation-fill-mode: forwards;
        animation-direction: alternate;
        animation-timing-function: linear;
        animation-duration: 2s;
        animation-iteration-count: infinite;
    }

    @keyframes run {
        0%{
            border-radius: 0;
        }
        10%{
            border-radius: 10%;
            transform: translateX(100px) scale(90%) rotate(90deg);
        }
        20%{
            border-radius: 20%;
            transform: translateX(200px) scale(80%) rotate(180deg);
        }
        40%{
            border-radius: 30%;
            transform: translateX(300px) scale(70%) rotate(270deg);
        }
        60%{
            border-radius: 40%;
            transform: translateX(400px) scale(60%) rotate(360deg);
        }
        80%{
            border-radius: 50%;
            transform: translateX(500px) scale(50%) rotate(540deg);
        }
        100%{
            border-radius: 50%;
            transform: translateX(500px) scale(50%) rotate(720deg);
        }
    }


    .boxE1:hover{
        transform: rotateX(360deg);
    }

    .boxE2:hover{
        transform: rotateY(360deg);
    }


    .boxE3:hover{
        transform: rotateZ(360deg);
    }
    .boxE4:hover{
        transform: rotate3d(100,100,-10,360deg);
    }

    .perspective{
        perspective: 500px;
    }

    .boxF1:hover{
        transform: translate3d(50px,50px,100px);
    }