0506css3（2D、3D）动画

/*变化*/
.first{
    width: 200px;
    height: 200px;
    background-color: gold;
    transition: 3s;
}
.first:hover{
    /*2D*/
    transform: rotate(30deg);/*平面内旋转*/
    transform:translate(50px,50px);/*位置移动:向右,向下*/
    transform:scale(1.5,2);/*倍数缩放*/
    transform:skew(20deg,20deg);/*扭曲*/
    /*3D*/
    transform:rotateX(180deg);/*沿X轴旋转*/
    transform:rotateY(360deg);/*沿Y轴旋转*/
}
.second{
    width: 300px;
    height: 300px;
    background: black;
    position: relative;/*由于需要进位置改变,所以增加了position属性*/
    animation: donghua 5s infinite alternate;/*infinite无限循环alternate倒序播放*/
}
@keyframes donghua{/*改变位置颜色阴影......*/
    0%{background:red; border-radius: 90px; box-shadow: -35px 0px 15px gray; left: 0px; top: 0px;}
    20%{background:blue; border-radius: 30px; box-shadow: 0px 15px 10px beige; left: 200px; top: 0px;}
    40%{background:blueviolet; border-radius: 50px; box-shadow: 35px 5px 5px navy; left: 300px; top: 100px;}
    60%{background:gold; border-radius: 70px; box-shadow: 70px 40px 0px bisque; left: 200px; top: 200px;}
    80%{background:green; border-radius: 150px; box-shadow: 35px 35px 5px aliceblue; left: 0px; top: 200px;}
    100%{background:magenta; border-radius: 90px; box-shadow: -35px 0px 15px blue; left: 0px; top: 0px;}
    from{background:red; border-radius: 90px; box-shadow: -35px 0px 15px gray; left: 0px; top: 0px;}
    to{background:gold; border-radius: 70px; box-shadow: 70px 40px 0px bisque; left: 200px; top: 200px;}
}
.fangda{
    width: 55px;
    height: 55px;
    border: 1px solid blueviolet;
    overflow: hidden;
}
img{
    transition: 3s;
}
img:hover{
    transform: scale(1.5);
}