html - CSS 3D 遠近法オフ

Question

css の 3D 変換関数に慣れようとしています。この時点での私のコードは、チュートリアルからそのままコピーしたものです。それがどのように見えるかへのリンクは次のとおりです：http://desandro.github.com/3dtransforms/examples/card-01.html

私のコードは次のとおりです。

<html>
    <head>
        <style media="screen">      
            .container  {
                width: 200px;
                height: 260px;
                position: relative;
                -webkit-perspective: 800;
                }
            #card {
                width: 100%;
                height: 100%;
                position: absolute;
                -webkit-transform-style: preserve-3D;
                -webkit-transition: -webkit-transform 2s;
                }
            #card figure  {
                display: block;
                position: absolute;
                width: 100%;
                height: 100%;
                -webkit-backface-visibility: hidden;
                }
            #card .face1  {
                background: red;
                }
            #card .face2  {
                background: blue;
                -webkit-transform: rotateY(180deg);
                }
            #card:hover  {
                -webkit-transform: rotateY(180deg);
                }
        </style>
    </head>

    <body>
        <section class="container">
            <div id="card">
                <figure class="face1">1</figure>
                <figure class="face2">2</figure>
            </div>
        </section>
    </body>
</html>

私がチュートリアルから一言一句言ったように、私が変更したのはボタンの代わりにホバーを使用することだけでした。助けてくれてありがとう。

score 1 · Accepted Answer

に追加margin: 0しfigureます。この例には、それを適用する外部スタイルシートがあるため、それが必要であることはすぐにはわかりません。

score 0 · Accepted Answer

ちょっとutils.jsとflip.jsの2つのファイルがあります..それらの両方を含め、cssで使用するだけです

-webkit-transform-style
-moz-transform-style
-o-transform-style
transform-style

あなたの3D変換がすべてのブラウザでレンダリングされるように... :)

score 0 · Accepted Answer

フリップの初期化は CSS では行われません。ファイル「flip-card.js」を介して Javascript で行われます。

var init = function() {
  var card = document.getElementById('card');

  document.getElementById('flip').addEventListener( 'click', function(){
    card.toggleClassName('flipped');
  }, false);
};

window.addEventListener('DOMContentLoaded', init, false);

これは、onHover イベントハンドラーを変更する必要があります。

score 0 · Accepted Answer

数字を含むコンテナーがあり、コンテナー内に数字を配置するには、ルールを追加しmargin: 0px;ます (デフォルトでは 0 ではありません)。

html - CSS 3D 遠近法オフ

4 に答える 4

Related

Reference