CODEWITHSUNDEEP
htmlcssrotateanimation
mit drissia
mit drissia

Reputation: 31

Rotate logo 360 degree through y-axis

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?

Upvotes: 3

Views: 11523

Answers (3)

aswzen
aswzen

Reputation: 1642

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/

Upvotes: 0

vals
vals

Reputation: 64244

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)

Upvotes: 2

Bhavik
Bhavik

Reputation: 4904

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

Upvotes: 1

Related Questions