html - 上下反転させる軸や角度を変えたほうがいいですか？

Question

左/ライトではなく上/下にフリップしたいので、質問は軸または角度を変更する必要がありますか? 2時間で何もうまくいかないようです。これを案内してください。これがフィドルです。

HTML

<div class="flip" style="width: X.px; height: X.px;">
    <a href="#">
        <div class="flip-front">
            <img src="http://divabetic.files.wordpress.com/2012/07/dai-mcdonalds-400-calories280.jpg">
        </div>
           <div class="flip-back">
            <img src="http://divabetic.files.wordpress.com/2012/07/dai-mcdonalds-400-calories280.jpg">
        </div>
    </a>
</div>

CSS

.flip {
    position: relative;
    -webkit-perspective: 1000;
    -moz-perspective: 1000;
    -ms-perspective: 1000;
    -o-perspective: 1000;
    perspective: 1000;
}
.flip .flip-front, .flip .flip-back {
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: 0.75s;
    -moz-transition: 0.75s;
    -o-transition: 0.75s;
    transition: 0.75s;
}
.flip .flip-front {
    z-index: 5;
}
.flip .flip-back {
    z-index: 0;
    -webkit-transform: rotateY(-180deg);
    -moz-transform: rotateY(-180deg);
    -ms-transform: rotateY(-180deg);
    -o-transform: rotateY(-180deg);
    transform: rotateY(-180deg);

}
.flip:hover .flip-front {
    z-index: 5;
    -webkit-transform: rotateY(270deg);
    -moz-transform: rotateY(270deg);
    -ms-transform: rotateY(270deg);
    -o-transform: rotateY(270deg);
    transform: rotateY(270deg);
}
.flip:hover .flip-back {
    z-index: 5;
    -webkit-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    -o-transform: rotateX(0deg);
    transform: rotateX(0deg);
}

score 1 · Accepted Answer

あなたの場合、回転軸をX軸に変更したいとします。基本的に、rotateX()代わりに使用しますrotateY()。更新されたフィドルと CSS は次のとおりです。

.flip {
    position: relative;
    -webkit-perspective: 1000;
    -moz-perspective: 1000;
    -ms-perspective: 1000;
    -o-perspective: 1000;
    perspective: 1000;
}
.flip .flip-front, .flip .flip-back {
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: 0.75s;
    -moz-transition: 0.75s;
    -o-transition: 0.75s;
    transition: 0.75s;
}
.flip .flip-front {
    z-index: 5;
}
.flip .flip-back {
    z-index: 0;
    -webkit-transform: rotateX(-180deg);
    -moz-transform: rotateX(-180deg);
    -ms-transform: rotateX(-180deg);
    -o-transform: rotateX(-180deg);
    transform: rotateX(-180deg);

}
.flip:hover .flip-front {
    z-index: 5;
    -webkit-transform: rotateX(270deg);
    -moz-transform: rotateX(270deg);
    -ms-transform: rotateX(270deg);
    -o-transform: rotateX(270deg);
    transform: rotateX(270deg);
}
.flip:hover .flip-back {
    z-index: 5;
    -webkit-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    -o-transform: rotateX(0deg);
    transform: rotateX(0deg);
}

まだいくつかの奇妙な二重回転が発生していますが、それはあなたの例に存在していたので、あなたが何をしようとしているのか正確にはわからないので、私はそれを修正しようとしませんでした.

編集：

また、何が起こっているのか理解できれば、そこには不要な重複要素があります。ここでは、余分な要素を削除し、CSS を変更して同じ効果を得るために、1 つの要素を 2 つの 180 度ずつではなく 360 度回転させています。フィドル。また、絶対幅と高さを.flipdiv に適用するようにコードを修正して、Firefox で要素が回転したときに div が折りたたまれて二重に回転しないようにしました。

HTML:

<div class="flip"> 
    <a href="#">
        <div class="flip-front">
            <img src="http://divabetic.files.wordpress.com/2012/07/dai-mcdonalds-400-calories280.jpg">
        </div>
    </a>
</div>

CSS:

.flip {
    position: relative;
    -webkit-perspective: 1000;
    -moz-perspective: 1000;
    -ms-perspective: 1000;
    -o-perspective: 1000;
    perspective: 1000;
    height: 186px;
    width: 280px;
}
.flip .flip-front {
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: 0.75s;
    -moz-transition: 0.75s;
    -o-transition: 0.75s;
    transition: 0.75s;
}
.flip .flip-front {
    z-index: 5;
}
.flip:hover .flip-front {
    z-index: 5;
    -webkit-transform: rotateX(360deg);
    -moz-transform: rotateX(360deg);
    -ms-transform: rotateX(360deg);
    -o-transform: rotateX(360deg);
    transform: rotateX(360deg);
}

score 0 · Accepted Answer

ジョージ・イェーツが言ったように、変換をrotateXに変更する必要があります。

背面に別の画像が必要だと言っているので、これが CSS です。

.flip {
    position: relative;
    -webkit-perspective: 1000;
    -moz-perspective: 1000;
    -ms-perspective: 1000;
    -o-perspective: 1000;
    perspective: 1000;
    -webkit-perspective-origin-x: 140px;
    -moz-perspective-origin-x: 140px;
    -ms-perspective-origin-x: 140px;
    perspective-origin-x: 140px;
}
.flip .flip-front, .flip .flip-back {
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: 0.75s;
    -moz-transition: 0.75s;
    -o-transition: 0.75s;
    transition: 0.75s;
}
.flip .flip-front {
    z-index: 5;
}
.flip .flip-back {
    z-index: 0;
    -webkit-transform: rotateX(-180deg);
    -moz-transform: rotateX(-180deg);
    -ms-transform: rotateX(-180deg);
    -o-transform: rotateX(-180deg);
    transform: rotateX(-180deg);

}
.flip:hover .flip-front {
    z-index: 5;
    -webkit-transform: rotateX(180deg);
    -moz-transform: rotateX(180deg);
    -ms-transform: rotateX(180deg);
    -o-transform: rotateX(180deg);
    transform: rotateX(180deg);
}
.flip:hover .flip-back {
    z-index: 5;
    -webkit-transform: rotateX(0deg);
    -moz-transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    -o-transform: rotateX(0deg);
    transform: rotateX(0deg);
}

また、flip クラスにパースペクティブの原点を追加して、視点を中央に配置しました。左への回転として見えるのは遠近効果です。中央の回転を見ていますが、視点はフリップクラスの中央にあり、画像よりも大きくなっています。

したがって、あなたの視点は右にあり、回転は左に見えます。透視原点 x を 140px に設定すると、画像の中心になります

更新されたデモ

html - 上下反転させる軸や角度を変えたほうがいいですか？

3 に答える 3

Related

Reference