CSS文本翻转效果？

Question

自从我使用css以来已经很多年了（当时没有css3这样的东西）所以我在下一页上努力理解如何;

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

红色链接在悬停时进行了一种翻转操作，我尝试使用“检查元素”解密底层的css。但它就像意大利面条一样，我试着将课程粘贴到我的档案中，然后将其分配给结果。

这种效果是否有正式名称，或者是否有人可以告诉我如何复制它？

提前致谢。

Answer 1

类“roll-link”正在这里发挥作用。转换和转换属性正在做很酷的效果。当您看到-webkit-和-moz-以及其他意味着它适用于那些浏览器时，因为这些属性尚未标准，但有些浏览器仍然希望支持它们。

/* 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 );
}

这部分例如：

.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元素将应用这些样式，但是当不悬停在它们上时将停止应用这些样式。

CSS转换属性有点复杂，有几个部分。这里的很多人不喜欢w3schools，但他们是入门教育的良好起点。 http://www.w3schools.com/cssref/css3_pr_transform.asp

Answer 2

以下是负责轮换的代码：

-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 );

这是一个有效的JSFiddle