使用transition给图片增加悬停动画

    在CSS3中，实现旋转效果需要用到transform属性中的rotate属性；实现盒阴影效果需要使用box-shadow属性。具体参见下面的示例代码。

    

.pic{
    display: block; width: 310px;height: 468px;
    -webkit-transform: rotate(-10deg);
    transform: rotate(-10deg);
    -webkit-transition: all 0.5s ease-in;
}

.pic:hover,.pic:focus{
    border-color: darkgrey;
    -webkit-box-shadow:50px 20px 20px 20px #666;
    -webkit-transform: rotate(0deg) scale(1.1);
    transform: rotate(0deg) scale(1.1);
}
.pic:active{
    transform:rotateX(180deg)

转载于:https://www.cnblogs.com/jakywong5701219/p/5374695.html