1

私がcssを使ってから何年も経ちました（当時はcss3のようなものはありませんでした）ので、次のページでその方法を理解するのに苦労しています。

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

赤いリンクはホバー時に一種のフリップ操作を行います。「inspectelement」を使用して基になるcssを解読しようとしましたが、これはスパゲッティのようなものです。クラスをファイルに貼り付けて、結果をほとんど妨げずに割り当ててみました。

この効果の正式な名前はありますか、またはそれを複製する方法について誰かが私にアイデアを与えることができますか？

前もって感謝します。

4

2 に答える 2

4

クラス「ロールリンク」がここで魔法をやっています。transition プロパティと transform プロパティはクールな効果を発揮します。-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 クラスを持つ要素内の要素をスパンすると、これらのスタイルが適用されますが、ホバーしていないときはこれらのスタイルの適用が停止します。

CSS 変換プロパティは少し複雑で、いくつかの部分があります。ここの多くの人は w3schools が好きではありませんが、入門教育の良い出発点です。http://www.w3schools.com/cssref/css3_pr_transform.asp

于 2013-02-04T07:52:33.027 に答える