Home/ Questions/Q 9235263
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-18T06:59:11+00:00

It’s been many a year since I used css (there was no such thing

  • 0

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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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

    • 0