26

IE10の開発者ブログを調べたところ、preserve-3d設定がサポートされていないことがわかりました。

それらは回避策を提供しますが、私はそれを機能させることができないようです。以下の私の例は、Safari、Chrome、Firefoxで機能しますが、IE10では機能しません。誰かが私がこれを達成するのを手伝ってくれるなら、私はとても感謝しています。

ボックスはクリック時にY軸を中心に回転して、テキストと緑色の背景色を表示する必要があります。これはIE10には当てはまりません

私の例： http ：//codepen.io/2ne/pen/zEpge

コードの一部：

HTML

<div class="flip-wrapper">
    <div class="front"></div>
    <div class="back">IE10 SUCKS</div>
</div>

CSS

.flip-wrapper {
    cursor: pointer;
    height: 100%;
    -moz-perspective: 1000;
    -webkit-perspective: 1000;
    -ms-perspective: 1000;
    perspective: 1000;
    -moz-transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
    width: 100%;
}

.flip-wrapper .front,
.flip-wrapper .back {
    -moz-backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    height: 100%;
    position: absolute;
    width: 100%;
}

.flip-wrapper .back {
  background: none repeat scroll 0 0 #298F68;
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    transform: rotateY(180deg);
}

.flip-wrapper.flipped {
  cursor: default;
  -webkit-animation: flip 500ms 1;
    -moz-animation: flip 500ms 1;
    animation: flip 500ms 1;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    -o-animation-fill-mode: forwards;
    -ms-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

2ne

4

6 に答える 6

21

また、どこにも良い例が見つからなかったので、自分で作るのに時間がかかりすぎました。

これはすべてのブラウザで動作し、その奇妙な360度IEフリップはなく、静的コンテンツのプロビジョニングが含まれています（カードの両面にあります-両面の右上に「フリップ」ボタンを配置する必要がありました） 。

--Chrome、Firefox、Safari、Opera、IEの最新バージョンでテストしました。

http://jsfiddle.net/Tinclon/2ega7yLt/7/

編集：透明な背景でも機能します：http：//jsfiddle.net/Tinclon/2ega7yLt/8/

css（もちろん）にはIEハックが含まれているため、少し長いですが、htmlは非常に単純です。

<div class="card">
  <div class="content">
    <div class="cardFront">FRONT CONTENT</div>
    <div class="cardBack">BACK CONTENT</div>
    <div class="cardStatic">STATIC CONTENT</div>
  </div>
</div>


$('.card').hover(function(){$('.card').toggleClass('applyflip');}.bind(this));


.card {
    perspective: 1000px;
    -webkit-perspective: 1000px;
    -moz-perspective: 1000px;
    -o-perspective: 1000px;
    -ms-perspective: 1000px;
    margin:80px 150px;
    width:320px;
    height:243px;
    vertical-align:top;
    position:absolute;
    display:block;
    font-size:25px;
    font-weight:bold;
}

.card .content {
    transition: 0.5s ease-out;
    -webkit-transition: 0.5s ease-out;
    -moz-transition: 0.5s ease-out;
    -o-transition: 0.5s ease-out;
    -ms-transition: 0.5s ease-out;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;

    /* content backface is visible so that static content still appears */
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
    -moz-backface-visibility: visible;
    -o-backface-visibility: visible;
    -ms-backface-visibility: visible;


    border: 1px solid grey;
    border-radius: 15px;
    position:relative;
    width: 100%;
    height: 100%;

}
.card.applyflip .content {
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
}


.card .content .cardStatic {
    /* Half way through the card flip, rotate static content to 0 degrees */
    transition: 0s linear 0.17s;
    -webkit-transition: 0s linear 0.17s;
    -moz-transition: 0s linear 0.17s;
    -o-transition: 0s linear 0.17s;
    -ms-transition: 0s linear 0.17s;
    transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);

    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    height: 0;
    width: 100%;
    line-height:100px;
}

.card.applyflip .content .cardStatic {
    /* Half way through the card flip, rotate static content to -180 degrees -- to negate the flip and unmirror the static content */
    transition: 0s linear 0.17s;
    -webkit-transition: 0s linear 0.17s;
    -moz-transition: 0s linear 0.17s;
    -o-transition: 0s linear 0.17s;
    -ms-transition: 0s linear 0.17s;
    transform: rotateY(-180deg);
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    -o-transform: rotateY(-180deg);
    -ms-transform: rotateY(-180deg);
}

.card .content .cardFront {
    background-color: skyblue;
    color: tomato;
}

.card .content .cardBack {
    background-color: tomato;
    color: skyblue;
}

.card .content .cardFront, .card .content .cardBack {
    /* Backface visibility works great for all but IE. As such, we mark the backface visible in IE and manage visibility ourselves */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    -ms-backface-visibility: visible;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    text-align: center;
    line-height:200px;
    border-radius: 14px;
}
.card .content .cardFront, .card.applyflip .content .cardFront {
    transform: rotateY(0deg);
    -webkit-transform: rotateY(0deg);
    -moz-transform: rotateY(0deg);
    -o-transform: rotateY(0deg);
    -ms-transform: rotateY(0deg);
}

.card .content .cardBack, .card.applyflip .content .cardBack {
    transform: rotateY(-180deg);
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    -o-transform: rotateY(-180deg);
    -ms-transform: rotateY(-180deg);
}

.card .content .cardFront, .card.applyflip .content .cardBack {
    /* IE Hack. Halfway through the card flip, set visibility. Keep other browsers visible throughout the card flip. */
    animation: stayvisible 0.5s both;
    -webkit-animation: stayvisible 0.5s both;
    -moz-animation: stayvisible 0.5s both;
    -o-animation: stayvisible 0.5s both;
    -ms-animation: donothing 0.5s;
    -ms-transition: visibility 0s linear 0.17s;
    visibility: visible;
}
.card.applyflip .content .cardFront, .card .content .cardBack {
    /* IE Hack. Halfway through the card flip, set visibility. Keep other browsers visible throughout the card flip. */
    animation: stayvisible 0.5s both;
    -webkit-animation: stayvisible 0.5s both;
    -moz-animation: stayvisible 0.5s both;
    -o-animation: stayvisible 0.5s both;
    -ms-animation: donothing 0.5s;
    -ms-transition: visibility 0s linear 0.17s;
    visibility: hidden;
}
@keyframes stayvisible { from { visibility: visible; } to { visibility: visible; } }
@-webkit-keyframes stayvisible { from { visibility: visible; } to { visibility: visible; } }
@-moz-keyframes stayvisible { from { visibility: visible; } to { visibility: visible; } }
@-o-keyframes stayvisible { from { visibility: visible; } to { visibility: visible; } }
@-ms-keyframes donothing { 0% { } 100% { } }
于 2015-01-17T17:59:35.607 に答える
4

これははるかに単純なフリップアルゴリズムであり、IEでも機能します。 https://jsfiddle.net/mff4jzd2/8/

JAVASCRIPT：

        var state = 0;

        $('.container').on('click',function(){
            if(state == 0){

                state = 1;
                $('.front').addClass('flip-front');
                $('.back').addClass('flip-back');

            }
            else{

                state = 0;
                $('.front').removeClass('flip-front');
                $('.back').removeClass('flip-back');

            }   
        });

CSS：

    .container{

        width:170px;
        height:280px;
        display:inline-block;
        position:relative;
        transform: perspective(400px);
        cursor:pointer;

    }
    .front{

        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
        background-color:blue;        
        transform: perspective(400px) rotateY(0deg);        
        backface-visibility: hidden;
        transition: 1.0s;
        opacity:1;
        box-shadow: 0 8px 6px -6px black;
    }
    .back{

        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
        background-color:green;       
        transform: perspective(400px) rotateY(-180deg);         
        backface-visibility: hidden;
        transition: 1.0s;
        opacity:0;
        box-shadow: 0 8px 6px -6px black;
    }       
    .flip-front{
        opacity:0;
        transform: perspective(400px) rotateY(180deg);

    }
    .flip-back{
         opacity:1;  
         transform: perspective(400px) rotateY(0deg);
    }

HTML：

<div class="container">

    <div class="back"></div>
    <div class="front"></div>

</div>
于 2016-01-21T14:10:31.977 に答える
2

ここで答えを見つけました。私自身の更新されたフィドルをここに投稿しました-これはcssです（簡潔にするためにmsプレフィックスのみを含めました）：

.container {
width: 200px;
height: 260px;
position: relative;
margin: 0 auto 40px;
border: 1px solid #CCC;
-ms-perspective: 1000;
perspective: 1000;
}

.card {
display: block;
height: 100%;
width: 100%;
line-height: 260px;
color: white;
text-align: center;
font-weight: bold;
font-size: 140px;
position: absolute;
transition: all 0.5s linear;
backface-visibility: hidden;
}

.card.flipped {
    -ms-transform: rotateY(360deg);
    transform: rotateY(360deg);
}

.front {
    background: red;
}
.back {
    background: #00f;
    transform: rotateY( 180deg );
}

.container:hover .card {
    -ms-transform: rotateY(360deg);
    transform: rotateY(360deg);
}

（ホバーイベントに加えて）フリップするためのボタンハンドラーは次のとおりです。

$('button').click(function() {
    $('.card').toggleClass('flipped');
});

IE10の答えが360度反転していることは興味深い（そしてやや厄介です）（cssの「反転」クラスとホバーイベント）。まだ頭を包み込んでいます。

彼らがpreserve-3dをすぐに実装することを望んでいます。

于 2012-12-02T07:26:16.407 に答える
2

これはニコルズの非常に単純なバージョンです

長方形を反転

#container {
 position: relative;
 height:362px;
 width: 282px;
 margin: 0 auto;
}

#container div {
 position:absolute;
 left:0;
 top:0;
 width:242px;
 height: 322px;
 padding:20px;
 background:#463;
 -ms-border-radius: 5px;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 border-radius: 5px;
 -webkit-transition: 1.5s ease-in-out;
 -moz-transition: 1.5s ease-in-out;
 -ms-transition: 1.5s ease-in-out;
 -o-transition: 1.5s ease-in-out;
 transition: 1.5s ease-in-out;
}

#container:hover div.upper {
 -webkit-transform: perspective(800px) rotateY(179.9deg);
 -moz-transform: perspective(800px) rotateY(179.9deg);
 transform: perspective(800px) rotateY(179.9deg);
}

<div id="container" aria-haspopup="true">    
   <div class="upper"></div>
</div>

フリップコードだけを残しました。

ところで、素晴らしい効果ニコルズ！

于 2014-01-17T09:35:57.600 に答える
2

ブラウザ限定詞JSまたはその他の方法を使用して、CSSスタイルをIEのみに適用します。

次に、次のコードを使用します。

.ie .flip-wrapper:hover .back {
    -ms-backface-visibility: visible;
}

.ie .flip-wrapper:hover .front {
    visibility: hidden;
}
于 2015-03-05T13:08:27.287 に答える
1

OPが指摘しているように、彼らのブログには質問に対する答えがありますが、悲しいことに彼は引用しませんでした：

（注）W3C仕様では、このプロパティのキーワード値preserve-3dが定義されています。これは、フラット化が実行されないことを示します。現時点では、InternetExplorer10はpreserve-3dキーワードをサポートしていません。これを回避するには、子要素の通常の変換に加えて、親要素の変換を各子要素に手動で適用します。

要約すると、通常どおり、Microsoftのブラウザはひどく壊れています。

さらに調査すると、IE10では補間エンジンが不完全または壊れているようです。行列変換の観点からすべてを適用すると、複数の軸を中心とした回転が含まれる場合に「ランダム」フリップが発生します。行列補間の唯一の方法は、すべての補間を手動で処理することです。さらに、直角が関係する補間は、一貫性のない「ランダムな」反転を引き起こすようです。

必要なcssの補間に成功しましたが、（縮小されて）コードは数千行の長さです。つまり、プリコンパイルと長い待機時間を気にしないのであれば、IEは3dcssを実行できます。

于 2013-03-26T22:10:36.410 に答える