动画入门1-变形效果

  

<style>
    #div1{
        width: 400px;
        height: 300px;
        background-color: gold;
        /*过渡效果
        参数1：用来指定对哪些属性使用过度效果
        参数2：过渡效果持续时间
        参数3：过渡效果的显示速度变化
        参数4：用来指定过度效果的延迟时间*/
        transition: all 2s ease;
        background-image: url("../../../img/mj.JPG");
        background-size: 100% 100%;
        margin: 0 auto;
    }
    #div1:hover{
        /*translate:让元素在x轴和y轴方向发生偏移  参数1:x轴 参数2：y轴
        translatex:让元素x轴发生偏移
        translatey:让元素y轴发生偏移*/
        /*transform: translate(50px,50px);*/
        /*scale:让元素在x轴和y轴方向发生缩放 参数1:x轴 参数2：y轴
        scaley:让元素y轴发生缩放
        scalex:让元素x轴发生*/
        /*transform:scale(1.5)*/
        /*rotate:让你的元素按照指定的中心进行旋转
        rotatex:让元素绕着x轴旋转
        rotatey:让元素绕着y轴旋转*/
        /*transform:rotate(180deg)*/
        /*skew:倾斜*/
        transform:skew(60deg);
        /*transform-origin:用来设置旋转的中心*/
        transform-origin: left top;
    }
</style>