Tries to render CSS animation
I am trying to animate a heading element in CSS so that when it hovers it turns the text forward. I read a lot of tutorials and managed to get it to rotate clockwise (or counterclockwise), but not the way I want it (forward as if it rotates towards me).
A great example of the effect I am getting is displayed on http://disruptltd.com/ when hovering over nav links.
If anyone could tell me if this is possible with CSS or any information on how to achieve this effect, I would be very grateful
Here is the closest I have so far using this code:
.navigation h1:hover {
display: inline-block;
-moz-animation: spin-reverse 2s infinite linear;
-o-animation: spin-reverse 2s infinite linear;
-webkit-animation: spin-reverse 2s infinite linear;
animation: spin-reverse 2s infinite linear;
}
@-moz-keyframes spin-reverse {
0% { -moz-transform: rotate(0deg); }
100% { -moz-transform: rotate(-359deg); }
}
@-webkit-keyframes spin-reverse {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(-359deg); }
}
@-o-keyframes spin-reverse {
0% { -o-transform: rotate(0deg); }
100% { -o-transform: rotate(-359deg); }
}
@-ms-keyframes spin-reverse {
0% { -ms-transform: rotate(0deg); }
100% { -ms-transform: rotate(-359deg); }
}
@keyframes spin-reverse {
0% { transform: rotate(0deg); }
100% { transform: rotate(-359deg); }
}
I also made a jfiddle: http://jsfiddle.net/qzxbd5fz/
So basically, I want the effect to look like it was spinning towards me like a slot machine, as opposed to this spinning clock style effect.
Thank you in advance
source to share
Here's a fairly simple example I developed by slightly modifying your markup. Since the spinning automaton effect requires depth, this means we need some kind of wrapping so that we can declare a value perspective
for the parent:
<h1><span>SITE LOGO</span></h1>
The slot machine effect includes the following:
- Give depth to an element so that when facing back (away from you) it is farther from the screen / view
- Using the scale, resize the element as we are going to translate the element to the z-axis to get the depth effect
The code looks like this and an example script can be seen here: http://jsfiddle.net/teddyrised/qzxbd5fz/2/ . To better demonstrate the effect, I decided to use a CSS transition, but you can always convert it to animation.
h1 {
background: #eee;
padding: 30px;
perspective: 100px;
}
h1 span {
display: block;
text-align: center;
transition: all 1s ease-in-out;
-webkit-transform: rotateX(0) translateZ(50px) scale(0.5);
}
h1:hover span {
-webkit-transform: rotateX(-360deg) translateZ(50px) scale(0.5);
}
More importantly, you can use backface-visibility: hidden
on an element <span>
to prevent text from showing when rotated -180deg away from the viewer along the X axis.
A simpler solution
After seeing the OP figure out what effect he wants to see, maybe a simple translation with pseudo-elements would be fine.
The point is that in order to have the effect mentioned on the sample page, you will need to duplicate the text of the site logo anyway - I do not recommend using HTML for this, because it has no semantic meaning (imagine a search engine reads two "home" links). Instead, you can use pseudo-elements (which need to be updated when logo names change) or JS to duplicate text. Here I decided to use pseudo-elements for a pure CSS approach.
Check out the demo here: http://jsfiddle.net/teddyrised/qzxbd5fz/3/
Use the following markup again:
<h1><span>SITE LOGO</span></h1>
For your CSS:
h1 {
background: #000;
font-family: Arial;
overflow: hidden;
}
h1 span {
color: #fff;
transition: all .25s ease-in-out;
}
h1 span, h1 span::after {
display: inline-block;
position: relative;
}
h1 span::after {
content: 'SITE LOGO';
color: #1ddfb3;
-webkit-transform: translate3D(-100%, 100%, 0);
}
h1:hover span {
-webkit-transform: translateY(-100%);
}
source to share
Try http://jsfiddle.net/qzxbd5fz/1/
This is what I added
h1{
-webkit-transition:font-size 3s ;
}
h1:hover {
display: inline-block;
font-size:50px;
}
source to share