css - CSS3 translate() メソッド

Question

次のコードがあります。

<style>
span
{
width:200px;
height:100px;
background-color:red;
border:1px solid black;
}
span.c2
{
transform:translate(50px,100px);
-ms-transform:translate(50px,100px); /* IE 9 */
-webkit-transform:translate(50px,100px); /* Safari and Chrome */
}
</style>

<span class="c2">Hello. This is a DIV element.</span>

問題は、メソッドが要素translateに適用されていないことです。<span>また、要素に指定された幅と高さが機能していません。<span>

理由は何ですか？

Answer 1

それは機能します。要素はインラインであるdisplay: block;ため、forspan要素が必要です。作成しない限りspan、要素を翻訳しません。spandisplay: block;display: inline-block;

デモ

関連する私の質問