1

画像に変換を適用すると、変換されますが、2D の方法で行われます。視点が機能していないようです。ただし、オペラ/クロームでは完璧です。画像のdivに適用すると、パースペクティブが完全に機能します。これが私のコードです:-

<!DOCTYPE html> 
 <html>
    <head>
        <title>Testing Scripts</title>
        <!--[if lte IE 8]><script src="script/html5.js"></script>
        <![endif]-->
        <link rel="stylesheet" type="text/css" href="css/style.css">
    </head>
    <body>
    <div class="slider">
       <div class="sliced"><img src="images/1.jpg"></div>
    </div>
    </body> 
 </html>

スタイル.css

body {
    width: 960px;
    margin: 100px auto;
 }
.slider {
    -webkit-perspective : 600px;
    -moz-perspective : 600px;
    position: relative;

 }
 .sliced {
    position: absolute;


 }
.sliced img{
    -webkit-transform : rotateX(80deg);
    -moz-transform : rotateX(80deg);
}

に変更すると

.sliced{
    -webkit-transform : rotateX(80deg);
    -moz-transform : rotateX(80deg);
    }

それは完全に機能します。何か理由がありますか、それとも何か不足していますか? これが私のコードペンです

4

2 に答える 2

2

Firefox では、変換を適用する親にパースペクティブを適用する必要があります。（正確な理由はわかりません）。

そのため、関係がスライダー > スライス > img である HTML では、CSS は機能しません (スライダーは img の親ではありません)。あなたが言うように、スライスしたものを回転させるとうまくいきます。

それを機能させる別の可能性は、設定することです

.slider {
    -webkit-perspective : 600px;
    position: relative;

 }
 .sliced {
    -moz-perspective : 600px;
}

このように、パースペクティブはイメージの親 (Firefox の場合) にあり、機能します。

于 2013-10-06T20:40:02.587 に答える