CODEWITHSUNDEEP
csscss-transforms
Udders
Udders

Reputation: 6976

css3 rotate and origin

I am trying to create some top-to-text that will look similar to this, 

T  
E  
X  
T  

H  
E  
R  
E

However my code is producing the correct effect but not strictly speak correctly as it is ouputting it like this

E  
R  
E  
H  

T  
X  
E  
T

Here is my CSS, how can I make it so that the shows as the first example and not the second?

.accordion li > h2 {
    color: black;
    font-weight: normal;
    margin: 0;
    z-index: 2;
    position: absolute;
    top: 0; left: 0;
    -webkit-transform: translateX(-100%) rotate(-90deg);
    -webkit-transform-origin: right top;
    -moz-transform: translateX(-100%) rotate(-90deg);
    -moz-transform-origin: right top; 
    -o-transform: translateX(-100%) rotate(-90deg);
    -o-transform-origin: right top;
    -ms-transform: translateX(-100%) rotate(-90deg);
    -ms-transform-origin: right top;
    transform: translateX(-100%) rotate(-90deg);
    transform-origin: right top;
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}

Upvotes: 2

Views: 753

Answers (1)

Nachshon Schwartz
Nachshon Schwartz

Reputation: 15765

You want to rotate 90deg and not -90deg.

Upvotes: 1

Related Questions