0

Here's my current code so far:

http://jsfiddle.net/VsGMa/2/ As you can see the tab is not positioned correctly.

Here is the "horizontal" version which works fine:

http://jsfiddle.net/HHg7S/

Any ideas as to what may be wrong or how I can align it correctly?

transform-origin is now 0% 100% - tried a bunch of other values as well with no luck.

2 Answers 2

2

Try this one,

<div class="slick-tab slick-tab-270 slick-tab-open" style="background-image: none; background-color: rgb(102, 255, 0); border: 3px solid rgb(0, 0, 0); padding: 0px ! important; -moz-transform-origin: 0% 100%; -moz-transform: rotate(270deg); text-align: center; height: auto; position: absolute; margin-left: -3px; width: 100px; margin-top: 68px;">

Just inslude margin-top:68px; in this div.

View this one: http://jsfiddle.net/VsGMa/3/

2
  • But what is the margin-top calculated from? I need to be able to calculate the necessary margin-top automatically (via js)
    – user429620
    Oct 4, 2012 at 16:08
  • You can chain translate transforms after the rotate, see my answer.
    – Ana
    Oct 4, 2012 at 16:13
0

Use

transform-origin: 0 0;
transform: rotate(-90deg) translateX(-100%) translateY(-100%);

demo

Works no matter what size the tab should be.

1
  • Great, thanks a lot! Learned something new about chainability.
    – user429620
    Oct 4, 2012 at 16:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.