CODEWITHSUNDEEP
cssrotationtransformation
Hocine Ache
Hocine Ache

Reputation: 61

how to control the css rotation of an element inside a rotated element?

i want to insert some glyphicons inside some list elements and i want the rotation of the square list elements to be -45° but the link inside to keep it degree in a normal state how can i do that here is an example of my work so far example

the codes are here: HTML:

<ul>
    <li><a href="#">A</a></li>
    <li><a href="#">B</a></li>
    <li><a href="#">C</a></li>
</ul>

CSS:

ul {
list-style:none;}

ul > li {
float:left;
margin:0 12px;
background: #DDD;
padding:10px 14px;
-ms-transform: rotate(-45deg); 
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);}

ul > li > a {
text-decoration:none;}

Upvotes: 0

Views: 365

Answers (1)

Nilesh Mahajan
Nilesh Mahajan

Reputation: 3516

please have a look at the fiddle https://jsfiddle.net/nileshmahaja/rhmwqyaf/1/

I have just changed css styling of anchro tag element as follows 

ul > li > a {
    text-decoration:none;
    -ms-transform: rotate(45deg); 
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    display:block;
}

Upvotes: 1

Related Questions