Rotate logo 360 degree through y-axis

Question

i was testing out a logo rotation on the y-axis and i came with the following: http://jsfiddle.net/MEmnc/

.container { 
  width: 62px;
  height: 91px;
  position: relative;
  perspective: 400px;
}

#card {
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  transition: transform 1s;
}

#card figure {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}


  transform: rotateY( 180deg );
}

#card .flipped {
  transform: rotateY( 180deg );
}

For some reason i can't get it to work.

I want this logo to rotate when hovered over it. I used an existing logo but this is purely for testing purposes. It needs to rotate as in http://www.ultranoir.com/en/#!/home/

Also will this work for all browsers or is it better to use jquery?

score 2 · Answer 1 · edited Jun 20 '20 at 09:12

2

You can do that without problems with CSS. However, you have several things going wrong.

The correct CSS is :

.container { 
  width: 62px;
  height: 91px;
  position: relative;
  perspective: 400px;
    margin: 0px;
}

#card {
  width: 100%;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
      transition: transform 1s;
  transition: -webkit-transform 1s;

}

#card figure {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
    margin: 0px;
}

.container:hover #card {
  -webkit-transform: rotateY( 180deg );
  transform: rotateY( 180deg );
}

#card .flipped {
  -webkit-transform: rotateY( 180deg );
  transform: rotateY( 180deg );
}

updated demo

EDITED

There were some problems in the above demo; also I noticed in your video that you wanted an animation and not a transform.

DEMO with animation (webkit)

edited Jun 20 '20 at 09:12

Community

1
1

answered Jul 04 '13 at 21:22

vals

61,425
11
89
138

Wow, thanks.May i ask what you changed exactly. Now it rotates and before it didn't. But it's still not finished. The images are not in same position and i can't see the backimage during rotation. – mit drissia Jul 04 '13 at 21:48
Could you tell me how i can get the 2 pictures in same position.Now the black picture is below the white one.Also when the logo gets flipped halfway you don't see the backimage as in the example i gave. Have a look.thank you – mit drissia Jul 05 '13 at 07:48
thanks for the updated demo, this is exactly what i wanted. But there is still one problem, when you have away from the logo it goes back to original state immediately.I want it to finish the rotation when hovered away. How can i achieve this?thanks – mit drissia Jul 11 '13 at 10:57

score 1 · Answer 2 · answered Jul 04 '13 at 21:17

1

I didn't saw any rotation on the link you provided.. But my intuition says Try this

HTML

<section class="container">
    <div id="card">
        <img src='http://www.ultranoir.com/cdn/gene/image/common/logo/logo_un2_neg.png' alt='Title of image'/>
    </div>
</section>

CSS

.container {
    width: 62px;
    height: 91px;
    position: relative;
    perspective: 400px;
}
#card {
    width: 100%;
    height: 100%;
    position: absolute;
    transform-style: preserve-3d;
    transition: transform 1s;
}
#card figure {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
}
#card img:hover {
    transform: rotateY(360deg);
    -webkit-transform: rotateY(180deg);
    transition-duration: 1.5s;
    -webkit-transition-duration:1s;
}

I have not changed other classes you made..

answered Jul 04 '13 at 21:17

Bhavik

4,836
3
30
45

Rotating the element that you hover makes the hover effect instable. It's better to use hover on a base element (the container) and set the rotation on a child of this. (the card, or the img) – vals Jul 04 '13 at 21:26
@vals can you be more specific about **instable** – Bhavik Jul 04 '13 at 21:31
Guys, anybody?How can i get the images in same position?Also how to get "back"image seen by half rotation like in the link i gave you:http://ultranoir.com – mit drissia Jul 06 '13 at 07:19

score 0 · Answer 3 · answered Mar 20 '20 at 16:30

I fixed vals answer, by changing the img position to absolute and adding some transform to translate Z axis and removing the backface disabler

img {
    position: absolute;
}

img.front {
    z-index: 100;
    transform: translatez(1px);
}

please see here http://jsfiddle.net/56cy0s4w/

Rotate logo 360 degree through y-axis

3 Answers3

DEMO with animation (webkit)