CODEWITHSUNDEEP
htmlcsscss-transforms
user429620
user429620

Reputation:

Rotated Tab (Transform:rotate) Positioning

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.

Upvotes: 0

Views: 202

Answers (2)

Ana
Ana

Reputation: 37179

Use

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

demo

Works no matter what size the tab should be.

Upvotes: 0

Prabhu
Prabhu

Reputation: 1149

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/

Upvotes: 2

Related Questions