在悬停

Question

<figure>元素应在悬停时轮换，但不应在其子项<img>上轮换。仅使用SCSS。 <figure>的背景略大于<img>，因此会产生边框效果。

.about__image {
  margin: 4rem;
  width: 27rem;
  height: 27rem;
  float: left;
  -webkit-shape-outside: circle(50% at 50% 50%);
  shape-outside: circle(50% at 50% 50%);
  -webkit-clip-path: circle(50% at 50% 50%);
  clip-path: circle(50% at 50% 50%);
  position: relative;
  background-image: radial-gradient(at left top, red 25%, blue 55%);
}

.about__photo {
  position: absolute;
  margin: 1rem;
  width: 25rem;
  height: 25rem;
  float: left;
  -webkit-shape-outside: circle(50% at 50% 50%);
  shape-outside: circle(50% at 50% 50%);
  -webkit-clip-path: circle(50% at 50% 50%);
  clip-path: circle(50% at 50% 50%);
}

div {
  height: 600px;
  width: 100vw;
  background: #eee;
}

div:hover .about__image{
  transform: rotate(90deg);
}

<div>
<figure class="about__image">
  <img src="https://lorempixel.com/200/200/" class="about__photo">
</figure>
</div>

<figure>元素应在悬停时轮换，但不应在其子项<img>上轮换。仅使用SCSS。 <figure>的背景略大于<img>，因此会产生边框效果。 <figure>元素应在悬停时轮换，但不应在其子项<img>上轮换。仅使用SCSS。 <figure>的背景略大于<img>，因此会产生边框效果。

Answer 1

一个想法是旋转容器并对图像应用反向旋转，如下所示：

＆＃13;

＆＃13;

cap = Insert(cap, n);

＆＃13;

.about__image {
  margin: 4rem;
  width: 27rem;
  height: 27rem;
  float: left;
  -webkit-shape-outside: circle(50% at 50% 50%);
  shape-outside: circle(50% at 50% 50%);
  -webkit-clip-path: circle(50% at 50% 50%);
  clip-path: circle(50% at 50% 50%);
  position: relative;
  background-image: radial-gradient(at left top, red 25%, blue 55%);
  transition:1s;
}

.about__photo {
  position: absolute;
  margin: 1rem;
  width: 25rem;
  height: 25rem;
  float: left;
  -webkit-shape-outside: circle(50% at 50% 50%);
  shape-outside: circle(50% at 50% 50%);
  -webkit-clip-path: circle(50% at 50% 50%);
  clip-path: circle(50% at 50% 50%);
  transition:1s;
}

div:hover .about__image{
 transform:rotate(180deg);
}
div:hover .about__photo{
 transform:rotate(-180deg);
}

div {
  height: 600px;
  width: 100vw;
  background: #eee;
}

＆＃13;

＆＃13;

＆＃13;