In place rotate a div with CSS hover

Question

I would like to rotate the .profile__photo--border-2 div but it keeps on translating. And it doesn't rotate at all.

Here is the code.

Maybe I'm doing something wrong.

 &__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; } }

There.

can you provide some code snippet so we can be able to help you — davecar21
– davecar21, Commented Feb 27, 2018 at 1:47
Welcome to Stack Overflow! Questions seeking debugging help should include the desired behavior, a specific problem or error and the shortest code necessary to reproduce it within the question itself. Questions without a clear problem statement are not useful to other readers. Please see: How to create a Minimal, Complete, and Verifiable example. — Gerardo BLANCO
– Gerardo BLANCO, Commented Feb 27, 2018 at 1:52

A. L · Accepted Answer · 2018-02-27 02:08:22Z

You were missing some things.

http://jsfiddle.net/Lpavdvko/

&--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 }

Thank your for your time and your help. This solved it. Damn that transform-origin property.
@r_andrini when in doubt, just apply everything, even if it seems redundant.

Collectives™ on Stack Overflow

In place rotate a div with CSS hover

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related