CSS实现鼠标悬停图片向上浮动，放大，翻转

css + html 实现鼠标悬停图片向上浮动小案例如下：

 效果图展示：

设置index.css样式  

.box {
    width: 400px;
    height: 400px;
    margin-top: 100px;
    margin-left: 300px;
    transition: all 0.4s;//设置上浮过渡时间
}

.box:hover {
    box-shadow: 0 8px 8px 0 grey;  // 设置盒子阴影
    transform: translate(0, -10px); // 鼠标悬浮时box向上浮动的距离
}

设置html页面

鼠标悬停图片放大 ，在css样式中增加 transform:scale(放大倍数)

.box:hover {
    box-shadow: 0 8px 8px 0 grey;
    transform: translate(0, -10px);
    transform: scale(1.2)
}

.box-bd {
    margin: 20px 0 0 300px;
    width: 700px;
}

 

transform: rotate(angle)指定元素的 2D 旋转，transition: all 0.2s设定旋转的动画时间

代码展示如下： 

.box {
    width: 200px;
    height: 200px;
    transition: all 0.2s;
}

.box:hover {
    box-shadow: 0 8px 8px 0 grey;
    transform: rotate(-360deg);    
}

旋转效果图如下所示：