CSS3 Rotate - Unable to work

[Siberian]

I want the word "gallery" to do a css3 3D rotate transition and reveal the words "art/art2" unfortunately I'm having a mud of a time getting it to work.

HTML

<div class="wrap">
<div class="gallery">Gallery</div>
<div class="back"><a href="" class="link_a">Art</a><a href=""
class="link_b">Art2</a>
</div>

CSS

.gallery {font-size:4em;color:orange;}
.gallery a:hover {color:orange;position:absolute;-webkit-transition: all .1s ease-in-out;-webkit-perspective:600px; none;-webkit-transform-style: preserve-3d;}
.back {font-size:4em;position:absolute;top:2px;}
.back a:hover {color:grey;-webkit-transform: rotateX(180deg);-webkit-perspective: 500px;}

[JorgeM]

Before we even bother looking at this code in details... What browser are trying this with? The transform property which you didn't include is supported by IE10 and Firefox. If you are trying with IE your code will not work.

You only included the WebKit alternative which is supported by opera chrome and safari.

[Siberian]

At this time I'm only testing with Webkit browsers, which is obviously Chrome / Opera, that is why I only have one vendor prefix.

[Siberian]

ARghh I can't figure this out ! Of all style sheet rules this is playing hardball.

[Fernando_4]

You forgot to add display:block; to the elements you need to rotate.

[Siberian]

.gallery {font-size:4em;color:orange;display:block;}
    .gallery a:hover {color:orange;position:absolute;-webkit-transform: rotateX(125deg);-webkit-perspective: 300px;display:block;}

I added {display:block} to both elements, I know it probably is wrong, I wanted to test if it would work, unfortunately, no.

[Fernando_4]

HTML

<div class="wrap">
  <div class="gallery">Gallery</div>
  <div class="back">
    <a href="" class="link_a">Art</a>
    <a href="" class="link_b">Art2</a>
  </div>
</div>

CSS

.gallery {
  font-size:4em;color:orange;
}
.gallery a:hover {
  color:orange;
  position:absolute;
  -webkit-transition: all .1s ease-in-out;
  -webkit-perspective:600px;
  -webkit-transform-style: preserve-3d;
}
.back {
  font-size:4em;
  position:absolute;
  top:2px;
}
.back a:hover {
  display:block;
  color:grey;
  -webkit-transform: rotateX(180deg);
  -webkit-perspective: 500px;
}

Here's a working JS BIN

[Siberian]

Does JSBin support vendor prefixes, all I see is flickering when I hover ?

[Fernando_4]

Yes, JSBIN supports vendor prefixes.

You see the flickering because when you hover the item, it rotates into another position and your mouse is no longer on top of it, which makes it revert to it's original position where your mouse is. That makes a loop, hence the flickering.

Rotating on hover doesn't seem like a good idea, unless you can figure out a way to keep the object in the same place while rotating. Play around with position on your console, it might just pop into place.

If you keep having problems just let us know so we can try to stop the flicker^^

[Siberian]

I'm continuing to experience problems, arghh. I changed both the .gallery a:hover and the .back class to position:relative; as you mentioned, no progress has been made :(

[Fernando_4]

Do you have some sort of end result in mind. Can you make a png of the before and after so we can try to replicate?

[Siberian]

The end result is the word "gallery" rotates with a CSS3 3D rotation and reveals the word "art/art2" which are individual links.

[Fernando_4]

Is this JS BIN close?

I am having some issues with the links, as they aren't clickable atm, but I'll try to get on that later.

[Siberian]

The word "gallery" should rotate on the X, then -backface visibility:hidden for the word "gallery", then show the word "art/art2". I don't know if the code is working on your end with JSBin but all I'm seeing is flickering. I tried JsFiddle, same results <sigh> :-)

[Fernando_4]

This last one shouldn't flicker... gotta take a look later.

But if you need an animation to rotate the word and then hide it, I would suggest jQuery, since you can use event callbacks to fire other events, in this case complete animations.

[Siberian]

I want to get it to work with CSS3 :-) I hope you know what my goal is ? :) When you have the time take a look because all I get is flickering.

This is your answer:

http://daneden.github.io/animate.css/

[Siberian]

iamthwee - not the answer I want ! :)

[Fernando_4]

Actually it does look like a nice solution and it is CSS only. The author only suggests jQuery as a way to enhance behaviou, but not a requirement.

Check the Github page for more documentation.

[Siberian]

It is a nice solution, I want to solve this with just vendor prefixes and css, no reliance on jquery for this.

Fernado - You mentioned you were going to look at the CSS code, wondering if you will have time to get around to that ?

[Fernando_4]

I will, I got sick yesterday and I'm still at work. I'll try to get to it later today.

It is a nice solution, I want to solve this with just vendor prefixes and css, no reliance on jquery for this.

The solution presented does not require jQuery, you can use the CSS file only and just add the appropriate classes to the elements. That's what the author mentions on his Github page.

[Siberian]

It is a nice find but I'll wait until you feel better, I want to understand why it's not working with plain css3 ;-)

[Fernando_4]

Take a look at this one, it's not perfect yet, but it's prooving to be a puzzle to pull off without jQuery. It isn't working on Chrome for whatever reason, I read about it and animations should be covered in webkit browsers, try to mess around with it.

JS BIN

[Siberian]

I always use vendor prefixes with most CSS3 rules, except for some which work without.

The rotate is working, but when it rotate it should reveal the word "art/art2" this is the road block I hit as well, arghh. I don't want to use jQuery, I know you know this already :) It's just frustrating me.