1

I'am trying to rotate a box with text like a slot-machine. I use pure css. I think it works so far but i do have a problem that the rotated-box is smaller after rotation. Here is my code: jsfiddle

The main-code is done here:

#category_wrapper.show-unten{
  -webkit-transform: translateZ(-5px) rotateX(90deg);
  -moz-transform: translateZ(-75px) rotateX(90deg);
  -ms-transform: translateZ(-75px) rotateX(90deg);
  -o-transform: translateZ(-75px) rotateX(90deg);
  transform: translateZ(-75px) rotateX(90deg);

}

Is this a bug or do I something wrong?

hamburger
  • 1,339
  • 4
  • 20
  • 41
  • They look the same to me. 211x106 in Chrome inspector. Also, in your `-webkit-transform`, `translateZ` is `-5px` and not `-75px`. – casraf Jun 25 '13 at 12:10
  • updated http://jsfiddle.net/Yg4w7/7/ but in firefox it is still smaller – hamburger Jun 25 '13 at 12:19
  • just for info my answer was only on fire fox to do it for all browsers check this : http://stackoverflow.com/questions/11026200/rotating-text-with-css3-html5?answertab=votes#tab-top – Muath Jun 25 '13 at 13:37

1 Answers1

2

only use this:

#category_wrapper.show-unten{
-webkit-transform: translateZ(-5px) rotateX(90deg);
-moz-transform: translateZ(-75px) rotateX(90deg);
-ms-transform: translateZ(-75px) rotateX(90deg);
-o-transform: translateZ(-75px) rotateX(90deg);
transform: translateZ(0px) rotateX(90deg);

}

the changes at last line see==> transform: translateZ(0px) rotateX(90deg);

and use this:

transform: rotateX(-100deg) translateZ(75px); //instead of -90 deg in class .unten

i updated your jsfiddle =>Jsfiddle

Muath
  • 4,351
  • 12
  • 42
  • 69