[英]In place rotate a div with CSS hover
我想旋转.profile__photo - border-2 div,但它会继续翻译。 它根本不旋转。
这是代码。
也许我做错了什么。
&__photo {
position: relative;
z-index: 3;
&--border-1,
&--border-2 {
position: absolute;
height: 110px;
width: 110px;
top: 48%;
left: 50%;
transform: translate(-50%, -50%);
cursor: pointer;
border-radius: 50%;
border-width: 1px;
border-style: solid;
border-color: rgb(37, 184, 184) rgb(37, 184, 184) rgb(37, 184, 184) transparent;
transition: all 1.5s ease-in-out;
}
&--border-2 {
height: 120px;
width: 120px;
border-color:rgb(37, 184, 184) transparent rgb(37, 184, 184) rgb(37, 184, 184);
}
&--border-2:hover {
/* Something wrong going on here */
width: 120px;
height: 120px;
transform-origin: 0 0;
transform: rotateZ(360deg);
}
& img {
height: 100px;
width: 100px;
border-radius: 50%;
z-index: 3;
}
}
那里。
你错过了一些东西。
&--border-1,
&--border-2 {
position: absolute;
height: 110px;
width: 110px;
top: 48%;
left: 50%;
transform: translate(-50%, -50%) rotate(0); <---- new rotate
cursor: pointer;
border-radius: 50%;
border-width: 1px;
border-style: solid;
border-color: rgb(37, 184, 184) rgb(37, 184, 184) rgb(37, 184, 184) transparent;
transition: all 1.5s ease-in-out;
}
&--border-2:hover {
/* Something wrong going on here */
transform-origin: 50% 50%; <---- guessing you want to rotate in the center
transform: translate(-50%, -50%) rotate(360deg) ; <------ needed to maintain translation
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.