CSS3 translate() method

Question

I have the following code:

<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>

The problem is translate method is not getting applied to <span> element. Also the width and height specified for <span> element is not working.

What is the reason?

sorry i was thinking about the transform3d method caniuse.com/transforms3d — Rachel Gallen, May 10 '13 at 18:05

score 1 · Accepted Answer · edited May 23 '17 at 12:13

1

It does work, you need to have display: block; for span element as span element is inline, it won't translate the span element unless you make it display: block; or display: inline-block;

Demo

Related Question Of Mine

edited May 23 '17 at 12:13

Community

1
1

answered May 10 '13 at 18:05

Mr. Alien

153,751
34
298
278

1

do u mean it dont apply for inline element . – Maizere Pathak.Nepal May 10 '13 at 18:06
Alein what about height and weidth .I was taught every element has these two properties – Maizere Pathak.Nepal May 10 '13 at 18:07
@Maizere Yes it won't, here's my question http://stackoverflow.com/questions/14883250/does-css-transform-property-works-on-block-and-inline-block-level-elements-only – Mr. Alien May 10 '13 at 18:07
1

A more complete explanation would be nice. Here are some references to start with: https://developer.mozilla.org/en-US/docs/CSS/transform and http://dev.w3.org/csswg/css-transforms/#annotation_definitions (Ctrl+F "transformable element"). – Rob W May 10 '13 at 18:07
@Mr.Alien but image is also an inline element why width and height for it – Maizere Pathak.Nepal May 10 '13 at 18:18
@Maizere We had attributes of height and width for `img` tag, and not for `span` :) – Mr. Alien May 10 '13 at 18:21

CSS3 translate() method

1 Answers1