1

次の CSS を使用して、CSS3 でフリッピング トランジションを作成しています。

/* simple */
    .flip-container {
        -webkit-perspective: 1000;
        -moz-perspective: 1000;
        perspective: 1000;
                   -webkit-box-shadow: 1px 1px 1px 1px #ccc;  
                   -moz-box-shadow: 1px 1px 1px 1px #ccc;  
                    box-shadow: 1px 1px 1px 1px #ccc;  
        border: 1px solid #fff;


    }

        .flip-container:hover .flipper, .flip-container.hover .flipper {
            -webkit-transform: rotateY(180deg);
            -moz-transform: rotateY(180deg);
            transform: rotateY(180deg);
        }

    .flip-container, .front, .back {
         width: 160px;
         height: 160px;
    }

    .flipper {
        -webkit-transition: 0.6s;
        -webkit-transform-style: preserve-3d;

        -moz-transition: 0.6s;
        -moz-transform-style: preserve-3d;

        transition: 0.6s;
        transform-style: preserve-3d;

        position: relative;
    }

    .front, .back {
        -webkit-backface-visibility: hidden;
        -moz-backface-visibility: hidden;
        backface-visibility: hidden;

        position: absolute;
        top: 0;
        left: 0;
    }

    .front {

z-index: 2;
text-align: center;
    }

    .back {

        -webkit-transform: rotateY(180deg);
        -moz-transform: rotateY(180deg);
        transform: rotateY(180deg);
    }

    .front .name {
        font-size: 2em;
        display: inline-block;
        background: rgba(33, 33, 33, 0.9);
        color: #f8f8f8;
        font-family: Courier;
        padding: 5px 10px;
        border-radius: 5px;
        bottom: 60px;
        left: 25%;
        position: absolute;
        text-shadow: 0.1em 0.1em 0.05em #333;

        -webkit-transform: rotate(-20deg);
        -moz-transform: rotate(-20deg);
        transform: rotate(-20deg);
    }

    .back-logo {
        position: absolute;
        top: 40px;
        left: 90px;
        width: 160px;
        height: 117px;
        background: url(logo.png) 0 0 no-repeat;
    }

    .back-title {
        font-weight: bold;
        color: #00304a;
        position: absolute;
        top: 180px;
        left: 0;
        right: 0;
        text-align: center;
        text-shadow: 0.1em 0.1em 0.05em #acd7e5;
        font-family: Courier;
        font-size: 2em;
    }

    .back p {
        position: absolute;
        bottom: 40px;
        left: 0;
        right: 0;
        text-align: center;
        padding: 0 20px;
    }

CSS の実装は次のとおりです。

 <div class="sidepanel" id="troll">
    <div class="flip-container" ontouchstart="this.classList.toggle('hover');">
    <div class="flipper">
    <a href="../articlenew/troll.php?id=<?php echo rand(1,$maxnum);?>"><div class="front" >
     <span style="font-size: 26px; color:#333;">The Best Thing in this World is</span><br />
        <strong style="font-size: 40px; color:red;">SE...</strong></div></a>

<a href="../articlenew/troll.php?id=<?php echo rand(1,$maxnum);?>"><div class="back" style="text-align:center; color:#333;">
  <!-- back content -->
    <span style="font-size: 30px">Secrets!</span>
    <img src="../trial/youmad.png" width="70" height="70" /><br />
    <span style="font-size: 20px">You Mad?</span><br />
    <span style="font-size: 16px">Best College Trolls</span> </div></a>
    </div>
</div>

問題は、一部のブラウザでは正常に動作することです。一部のブラウザでは、テキストが鏡に映ったときのように、前面のテキストと背面のテキストが反転して表示されます。私はそれがめちゃくちゃになっている手がかりがありません。ブラウザのバージョンと互換性については考えましたが、HTML5 と CSS3 は現在十分に普及しており、すべてのブラウザがそれらをサポートしていると思います。説明のためにいくつかの画像も共有しています。

Mac OS バージョン 29.0.1547.76 上の Chrome

Mac OS バージョン 5.1.7 の Safari (7534.57.4)

4

2 に答える 2

2

このコードを使用すると、問題が解決します

CSS

.flip-container {
    -webkit-perspective: 1000;
    -moz-perspective: 1000;
    -o-perspective:1000;
    -ms-perspective: 1000;
    perspective: 1000;

    -ms-transform: perspective(1000px);
    -moz-transform: perspective(1000px);
    -moz-transform-style: preserve-3d; 
    -ms-transform-style: preserve-3d; 

  }
  /* for IE */
.flip-container:hover .back, .flip-container.hover .back {
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    transform: rotateY(0deg);
}

.flip-container:hover .front, .flip-container.hover .front {
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

/* END: for IE */


.flipper {
    -webkit-transition: 0.6s;
    -webkit-transform-style: preserve-3d;
    -ms-transition: 0.6s;

    -moz-transition: 0.6s;
    -moz-transform: perspective(1000px);
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;

    transition: 0.6s;
    transform-style: preserve-3d;

    position: relative;
    top: 0;
    left: 0;
    width: 180px;
    height: 180px;
    -webkit-transition: all 0.4s ease-in-out;
    -moz-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
}

.front, .back {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;

    -webkit-transition: 0.6s;
    -webkit-transform-style: preserve-3d;

    -moz-transition: 0.6s;
    -moz-transform-style: preserve-3d;

    -o-transition: 0.6s;
    -o-transform-style: preserve-3d;

    -ms-transition: 0.6s;
    -ms-transform-style: preserve-3d;

    transition: 0.6s;
    transform-style: preserve-3d;

    position: absolute;
    top: 0;
    left: 0;
    width: 180px;
    height: 180px;


}

.front {
    -webkit-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
    background-position: center center;
    z-index: 2;
    background:green;
}

.back {
    background: #f2f2f2;
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    -o-transform: rotateY(-180deg);
    -ms-transform: rotateY(180deg);
    transform: rotateY(-180deg);
}

Jsfiddle のデモ

于 2014-03-05T10:37:49.063 に答える
0

IE は背面可視性をサポートしていません

Chromeについてはこちら

また、 backface-visibility hidden と transform-style : preserve-3d をすべてに設定してみます(確認のため)

于 2013-09-27T18:12:19.590 に答える