Html 悬停时旋转图像

.bg-bean {
  color: white;
  font-weight: bold;
  border: none;
  position: absolute;
  top: 50%;
  left: 45%;
  transform: translate(48%, -40%);
  text-align: right;
  margin: 0%;
  padding: 0%;
  -webkit-filter: drop-shadow(20px 20px 20px rgb(0, 0, 0));
  filter: drop-shadow(20px 20px 20px rgb(0, 0, 0));
  transition: transform .7s ease-in-out
}

.bg-bean:hover {
  transform: rotate(360deg);
}

<div class="bg-bean">
  <img src="https://placekitten.com/200/300" >
</div>

 .bg-bean {
    color: white;
    font-weight: bold;
    border: none;
    position: absolute;
    top: 50%;
    left: 45%;
    text-align: right;
    margin: 0%;
    padding: 0%;
    -webkit-filter: drop-shadow(20px 20px 20px rgb(0, 0, 0));
    filter: drop-shadow(20px 20px 20px rgb(0, 0, 0));
    transition: all  .7s ease-in-out
}

.bg-bean:hover{
    transform: rotate(360deg);
}

<div class="bg-bean">
    <img src="stylesimages/bean.png" width="100px" height="100px" >
</div>

Html相关问答推荐

什么是有间隙的顶部利润？

如何通过将项目包裹在迪夫中来保持最右列的对齐方式来对齐项目？

Chrome中是否有一个本地显示密码功能，用于`input type = password/`？""<"">

窗口对象中是否有对<；html&>根元素的引用？

如何使用bslb设置可导航页面侧边栏的样式

如何将FlexBox项目zoom 到其包含图像的大小

如何才能只给没有孟加拉语Kar符号的字母上色？

将网格包装在css中

我怎样才能在我的网站上制作花哨的角落

将精选选项的价格合并为一个价格HTML、PHP和JQuery

获取标准的Python脚本，以便使用FASK对网站进行Flask

使用不同字体对齐元素

在 HTML 视频上环绕文本叠加

并排放置两个 div，同时 div2 环绕 div1

为什么 Flexbox 中相邻元素上的 flex：1 会影响另一个元素的固定宽度？

如何通过像图像一样的 元素来调整 SVG 图标的大小

使用 R markdown 在 html 中包含图像

调整窗口大小时文本重叠导航栏

如何为某些行具有 rowspan 的表的每个奇数行着色

标题之间和之后的 Hr 线