は、だから私はここに画像のセットを持っているMozillaの

Question

にCSSアニメーション作品を作ることは彼らのためにHTMLである：

<figure> 
    <img src=""> 
    <figcaption> 
     <h3>Title</h3> 
     <p>Description.</p> 
    </figcaption> 
</figure> 

<figure> 
    <img src="http://lorempixel.com/192/96/sports/2" alt="Portfolio Item"> 
    <figcaption> 
     <h3>Title</h3> 
     <p>Description.</p> 
    </figcaption> 
</figure> 

<figure> 
    <img src=""> 
    <figcaption> 
     <h3>Title</h3> 
     <p>Description.</p> 
    </figcaption> 
</figure> 

<figure> 
    <img src=""> 
    <figcaption> 
     <h3>Title</h3> 
     <p>Description.</p> 
    </figcaption> 
</figure> 

<figure> 
    <img src=""> 
    <figcaption> 
     <h3>Title</h3> 
     <p>Description.</p> 
    </figcaption> 
</figure> 

<figure> 
    <img src=""> 
    <figcaption> 
     <h3>Title</h3> 
     <p>Description.</p> 
    </figcaption> 
</figure> 

<figure> 
    <img src="http://lorempixel.com/192/96/sports/7" alt="Portfolio Item"> 
    <figcaption> 
     <h3>Title</h3> 
     <p>Description.</p> 
    </figcaption> 
</figure> 

<figure> 
    <img src=""> 
    <figcaption> 
     <h3>Title</h3> 
     <p>Description.</p> 
    </figcaption> 
</figure> 

<figure> 
    <img src=""> 
    <figcaption> 
     <h3>Title</h3> 
     <p>Description.</p> 
    </figcaption> 
</figure> 

彼らは箱のように見えるし、あなたがしてCSSアニメーションがトリガさをクリックしたときに、彼らは1を反転側は、他のテキストを持っているイメージがあり、ここでCSSのコードは次のとおりです。

body { 
    background-color: #f6f6f6; 
    background-image: -webkit-linear-gradient(left, hsla(0,0%,0%,0) 0%, hsla(0,0%,0%,0) 50%, 
         hsla(0,0%,0%,.015) 50%, hsla(0,0%,0%,.015) 100%), 
         -webkit-radial-gradient(hsla(0,0%,0%,.05) 10%, transparent 15%); 
    background-size: 1.5em 1.5em, .5em .5em; 
    font-family: sans-serif; 
    font-size: 100%; 
    line-height: 1.5; 
    margin: 0 auto; 
    padding: 1.5em; 
    width: 45em; 
} 
figure { 
    float: left; 
    height: 6em; 
    margin: 1.5em; 
    width: 12em; 
    -webkit-transform: perspective(500); 
    -webkit-transform-style: preserve-3d; 
    -webkit-transition: .5s; 
} 
figure:hover { 
    -webkit-transform: perspective(500) rotateX(90deg) translateY(-3em) translateZ(3em); 
} 
img { 
    background-color: #222; 
    box-shadow: 0 20px 15px -10px hsla(0,0%,0%,.25); 
    display: block; 
    height: 100%; 
    -webkit-transition: .5s; 
} 
figure:hover img { 
    box-shadow: none; 
} 
figcaption { 
    background-color: #222; 
    color: #fff; 
    padding: 1.5em; 
    -webkit-transform: rotateX(-90deg); 
    -webkit-transform-origin: 100% 0; 
    -webkit-transition: .5s; 
} 
figure:hover figcaption { 
    box-shadow: 0 20px 15px -10px hsla(0,0%,0%,.25); 
} 
h3 { 
    font-weight: bold; 
}​ 

すべてが完全に正常に動作しますが、あなたは、Mozillaを通じてアニメーションdosen't作業をそれを開いたときに、私が使用している理由を私は知りませんWebkitプレフィックスとまだそれはMozillaで動作しませんどのように私はそれも同様に動作させることができます

Answer 1

perspective() CSS機能のパラメータは、長さの単位を使用します。 perspective(500)をperspective(500px)に変更して、FirefoxとEdgeで動作させるようにしてください。

また、プレフィックスは古いブラウザのバージョンをサポートするために使用されます。 Firefoxは接頭辞-moz-を使用します。メジャーブラウザの新しいバージョンでは、互換性のためにベンダープレフィックスの使用を停止しています。ほとんどのブラウザをサポートするには、接頭辞付きでもなくてもアニメーションプロパティを使用する必要があります。

body { 
    background-color: #f6f6f6; 
    background-image: -webkit-linear-gradient(left, hsla(0, 0%, 0%, 0) 0%, hsla(0, 0%, 0%, 0) 50%, hsla(0, 0%, 0%, .015) 50%, hsla(0, 0%, 0%, .015) 100%), 
         linear-gradient(left, hsla(0, 0%, 0%, 0) 0%, hsla(0, 0%, 0%, 0) 50%, hsla(0, 0%, 0%, .015) 50%, hsla(0, 0%, 0%, .015) 100%), 
         -webkit-radial-gradient(hsla(0, 0%, 0%, .05) 10%, transparent 15%), 
         radial-gradient(hsla(0, 0%, 0%, .05) 10%, transparent 15%); 
    background-size: 1.5em 1.5em, .5em .5em; 
    font-family: sans-serif; 
    font-size: 100%; 
    line-height: 1.5; 
    margin: 0 auto; 
    padding: 1.5em; 
    width: 45em; 
} 
figure { 
    float: left; 
    height: 6em; 
    margin: 1.5em; 
    width: 12em; 
    -webkit-transform: perspective(500px); 
    -moz-transform: perspective(500px); 
    transform: perspective(500px); 
    -webkit-transform-style: preserve-3d; 
    -moz-transform-style: preserve-3d; 
    transform-style: preserve-3d; 
    -webkit-transition: .5s; 
    -moz-transition: .5s; 
    transition: .5s; 
} 
figure:hover { 
    -webkit-transform: rotateX(90deg) translateY(-3em) translateZ(3em); 
    -moz-transform: rotateX(90deg) translateY(-3em) translateZ(3em); 
    transform: rotateX(90deg) translateY(-3em) translateZ(3em); 
} 
img { 
    background-color: #222; 
    box-shadow: 0 20px 15px -10px hsla(0, 0%, 0%, .25); 
    display: block; 
    height: 100%; 
    -webkit-transition: .5s; 
    -moz-transition: .5s; 
    transition: .5s; 
} 
figure:hover img { 
    box-shadow: none; 
} 
figcaption { 
    background-color: #222; 
    color: #fff; 
    padding: 1.5em; 
    -webkit-transform: rotateX(-90deg); 
    -moz-transform: rotateX(-90deg); 
    transform: rotateX(-90deg); 
    -webkit-transform-origin: 100% 0; 
    -moz-transform-origin: 100% 0; 
    transform-origin: 100% 0; 
    -webkit-transition: .5s; 
    -moz-transition: .5s; 
    transition: .5s; 
} 
figure:hover figcaption { 
    box-shadow: 0 20px 15px -10px hsla(0, 0%, 0%, .25); 
} 
h3 { 
    font-weight: bold; 
} 
​ 

Mozillaの開発者ネットワークはperspectiveとvendor prefixesの詳細情報を持っています。

これが役に立ちます。