在悬停时旋转父级而不是子级 [英] Rotate Parent but not child on hover
问题描述
<figure>
元素应在悬停时旋转,但其子元素<img>
不应该旋转.仅使用SCSS. <figure>
的背景略大于<img>
的背景,因此具有边框效果.
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>
<figure>
元素应在悬停时旋转,但其子元素<img>
不应该旋转.仅使用SCSS. <figure>
的背景略大于<img>
的背景,因此具有边框效果.
<figure>
元素应在悬停时旋转,但其子元素<img>
不应该旋转.仅使用SCSS. <figure>
的背景略大于<img>
的背景,因此具有边框效果.
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.
推荐答案
一个想法是旋转容器并将反向旋转应用于图像,如下所示:
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>
这篇关于在悬停时旋转父级而不是子级的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!