Rotate Parent but not child on hover

问题:

The <figure> element should rotate on hover but not its child, the <img>. Using SCSS only. <figure> has a background slightly bigger than <img> so it gives a border effect.

.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>

The <figure> element should rotate on hover but not its child, the <img>. Using SCSS only. <figure> has a background slightly bigger than <img> so it gives a border effect. The <figure> element should rotate on hover but not its child, the <img>. Using SCSS only. <figure> has a background slightly bigger than <img> so it gives a border effect.

回答1:

An idea is to rotate the container and apply the inverse rotation to the image like this:

.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;
}

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