CSS3 翻译() 方法

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

它确实有效，您需要为 span 元素设置 display: block;，因为 span 元素是内联的，它不会翻译span 元素，除非您将其设为 display: block; 或 display: inline-block;

Demo

Related Question Of Mine