[英]div can rotate, span can't rotate but it can animate the transformation
I have attached code for three objects in html. 我在html中附加了三个对象的代码。 Please have a look at the SO code playground or here: http://jsfiddle.net/kr34643L/
请看看SO代码游乐场或在这里: http : //jsfiddle.net/kr34643L/
The first one (id1) is a div and I can rotate it via css3. 第一个(id1)是div ,我可以通过css3旋转它。
The second one (id2) is a span and it is not possible to rotate it in the same way. 第二个(id2)是一个跨度 ,不可能以相同的方式旋转它。
But it is possible to rotate a span (id3) while doing the transition. 但是可以在进行转换时旋转跨度 (id3)。 Only it doesn't stay in that position.
只有它不会留在那个位置。
I have seen answers about setting display to block or inline-block , but I honestly don't understand why I have to change the display style. 我已经看到了关于将显示设置为块或内联块的答案,但老实说我不明白为什么我必须更改显示样式。 Especially when the transition works well but only doesn't keep the position at the end.
特别是当转换运行良好但只是不保持位置结束时。
var id1 = document.getElementById('id1'); var id2 = document.getElementById('id2'); var id3 = document.getElementById('id3'); var rotate1 = 0; var rotate2 = 0; var rotate3 = 0; id1.addEventListener("click", function(){ rotate1 = rotate1 ? 0 : 45; id1.style.transform = "rotate("+rotate1+"deg)"; }); id2.addEventListener("click", function(){ rotate2 = rotate2 ? 0 : 45; id2.style.transform = "rotate(" + rotate2 + "deg)"; }); id3.addEventListener("click", function(){ rotate3 = rotate3 ? 0 : 45; id3.style.transform = "rotate(" + rotate3 + "deg)"; id3.style.transition = "transform 2s"; });
#id1, #id2, #id3 { width: 100px; height: 15px; border: 2px solid; }
<div class="centerbox"> <div id="id1" style="cursor:pointer">div can rotate</div> <span id="id2" style="cursor:pointer">span doesn't</span><br> <span id="id3" style="cursor:pointer">span can transform though</span> </div>
UPDATE UPDATE
Actually the CSS transform styles are not applied for the inline elements, since they are not considered as a block elements. 实际上CSS转换样式不适用于内联元素,因为它们不被视为块元素。
For the official answer check from the W3 standard . 对于W3标准的官方答复检查。
As per the W3 standard of transformable element: 根据可转换元素的W3标准:
an element whose layout is governed by the CSS box model which is either a block-level or atomic inline-level element, or whose display property computes to table-row , table-row-group , table-header-group , table-footer-group , table-cell , or table-caption [CSS21]
一个元素,其布局由CSS框模型控制,该模型是块级或原子内联级元素,或者其显示属性计算为表行 , 表行组 , 表标题组 , 表脚-group , table-cell或table-caption [CSS21]
an element in the SVG namespace and not governed by the CSS box model which has the attributes transform, 'patternTransform' or gradientTransform [SVG11].
SVG命名空间中的一个元素,不受CSS框模型的控制,该框模型具有属性transform,'patternTransform'或gradientTransform [SVG11]。
So you can't apply the transformation styles to <span>
element. 因此,您无法将转换样式应用于
<span>
元素。
As per the DOM, the block examples are structural elements while the inline elements are text-based (non structural). 根据DOM,块示例是结构元素,而内联元素是基于文本的 (非结构化的)。
To see this visually, refer the below screenshot: 要直观地看到这一点 ,请参阅以下屏幕截图:
From this you can see the block and inline-block elements having a clear structure (like a square or rectangle). 从中您可以看到具有清晰结构的块和内联块元素(如正方形或矩形)。 But the inline elements are not having a proper structure (which having the break off blocks).
但是内联元素没有合适的结构(具有中断块)。
And we can't properly (generically) apply the transformation for these unstructured blocks, so that the <span>
elements didn't support the transformation. 并且我们无法(通常)对这些非结构化块应用转换,因此
<span>
元素不支持转换。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.