javascript - div can rotate, span can't rotate but it can animate the transformation - Stack Overflow

admin管理员组

文章数量:1277308

I have attached code for three objects in html. Please have a look at the SO code playground or here: /

The first one (id1) is a div and I can rotate it via css3.

The second one (id2) is a span and it is not possible to rotate it in the same way.

But it is possible to rotate a span (id3) while doing the transition. 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>  

I have attached code for three objects in html. Please have a look at the SO code playground or here: http://jsfiddle/kr34643L/

The first one (id1) is a div and I can rotate it via css3.

The second one (id2) is a span and it is not possible to rotate it in the same way.

But it is possible to rotate a span (id3) while doing the transition. 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

• The description above is only valid for Chrome
• on FireFox id2 and id3 don't rotate and the transition of id3 doesn't work
• on IE11 all rotations and id3's transition works

• javascript
• html
• css

Share Improve this question Follow edited Jul 20, 2015 at 5:09 NilsB asked Jul 19, 2015 at 18:19 NilsBNilsB 1,18811 gold badge1919 silver badges4343 bronze badges 2

• I have your id2 span spinning on click when I apply: position: absolute not working, however, for the second span. Also I'm not seeing any transition on FF on the last element – s0rfi949 Commented Jul 19, 2015 at 19:01
• @s0rfi949. Thanks for the hint about FF. My problem as described occurs on Chromium. I will check IE11 as well. So it's even more plicated... – NilsB Commented Jul 19, 2015 at 19:09

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 6

Actually the CSS transform styles are not applied for the inline elements, since they are not considered as a block elements.

For the official answer check from the W3 standard.

As per the W3 standard of transformable element:

• 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 putes to table-row, table-row-group, table-header-group, table-footer-group, table-cell, or 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].

So you can't apply the transformation styles to <span> element.

As per the DOM, the block examples are structural elements while the inline elements are text-based (non structural).

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.

本文标签：