CODEWITHSUNDEEP
htmlcsshovercss-transitions
user1006221
user1006221

Reputation: 339

CSS Text Flip Effect?

It's been many a year since I used css (there was no such thing as css3 at the time) so I'm struggling to understand how, on the following page;

http://www.webdesignerdepot.com/2013/01/how-to-build-a-threaded-comment-block-with-html5-and-css3/

The red links do a sort of flip maneuver on hover, I've tried deciphering the underlying css with 'inspect element' but it's like spaghetti, I tried pasting the class in to my file and assigning it with little in the way of results.

Is there a formal name for this effect, or can anyone give me an idea as to how it can be replicated?

Thanks in advance.

Upvotes: 1

Views: 8803

Answers (2)

Amyth
Amyth

Reputation: 32969

Following is the code responsible for the rotation:

-webkit-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
-moz-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
-ms-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );

Here is a working JSFiddle

Upvotes: 4

user1934286
user1934286

Reputation: 1762

class "roll-link" is doing the magic here. The transition and transform properties are doing the cool effects. When you see -webkit- and -moz- and others that means it is for those browsers because the properties are not standard yet but some browsers want to support them anyway.

/* ROLL LINKS */
.roll-link {
    display: inline-block;
    overflow: hidden;

    vertical-align: top;

    -webkit-perspective: 600px;
       -moz-perspective: 600px;
       -ms-perspective: 600px;
       perspective: 600px;

    -webkit-perspective-origin: 50% 50%;
       -moz-perspective-origin: 50% 50%;
       -ms-perspective-origin: 50% 50%;
       perspective-origin: 50% 50%;

}

.roll-link:hover {text-decoration:none;}

.roll-link span {
    display: block;
    position: relative;
    padding: 0 2px;

    -webkit-transition: all 400ms ease;
       -moz-transition: all 400ms ease;
       -ms-transition: all 400ms ease;
       transition: all 400ms ease;

    -webkit-transform-origin: 50% 0%;
       -moz-transform-origin: 50% 0%;
       -ms-transform-origin: 50% 0%;
       transform-origin: 50% 0%;

    -webkit-transform-style: preserve-3d;
       -moz-transform-style: preserve-3d;
       -ms-transform-style: preserve-3d;
       transform-style: preserve-3d;
}
.roll-link:hover span {
        background: #DD4D42;


        -webkit-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
           -moz-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
           -ms-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
           transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
}

.roll-link span:after {
    content: attr(data-title);

    display: block;
    position: absolute;
    left: 0;
    top: 0;
    padding: 0 2px;

    color: #fff;
    background: #DD4D42;

    -webkit-transform-origin: 50% 0%;
       -moz-transform-origin: 50% 0%;
       -ms-transform-origin: 50% 0%;
       transform-origin: 50% 0%;

    -webkit-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
       -moz-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
       -ms-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
       transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
}

This part for example:

.roll-link:hover span {
        background: #DD4D42;

        -webkit-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
           -moz-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
           -ms-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
           transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
}

This means that span elements inside an element with the roll-link class when hovered on will apply these styles, but will cease application of these styles when not hovering on them.

The CSS transform property is a little complicated, having several parts. A lot of guys here do not like w3schools but they are a good starting point for introductory education. http://www.w3schools.com/cssref/css3_pr_transform.asp

Upvotes: 4

Related Questions