0

Below is my html code

<ul class="tabs">
     <li class="rotate"><a href="#tab1" class = "nororate" >One</a></li>
     <li class="rotate"><a href="#tab2" class = "nororate">Two</a></li>
</ul>

And Below is css code

 .rotate {
     transform: perspective(5px) rotateX(2deg);
 }

I want to rotate only li tag but not to rotate a tag, I have tried :not and > to prevent a tag be rotated but failed.

How can I do this?

Tordek
  • 10,628
  • 3
  • 36
  • 67
Owen
  • 1
  • 1
  • 3
    possible duplicate: [Prevent children from inheriting rotate transformation in CSS](http://stackoverflow.com/questions/9513588/prevent-children-from-inheriting-rotate-transformation-in-css) – Michael Benjamin Aug 17 '15 at 03:15

2 Answers2

1

You could apply something like this:

.rotate {
  transform: rotate(2deg);
}

.norotate {
  transform: rotate(-2deg);
}

Basically what you should do is to rotate the parent element and then rotate the content in the opposite direction to return it to the original position.

Amielucha
  • 123
  • 1
  • 7
  • Hi,Amielucha. I have tried this too, this can work ,however the text "one","two", will become indistinct. – Owen Aug 17 '15 at 03:10
  • I think maybe it is because that I use rotateX rather than rotate. So my case will become indistinct. – Owen Aug 17 '15 at 03:21
0

Something similar to this? Demo is in JSfiddle

http://jsfiddle.net/v82g9f79/2/

.rotate {
    position: relative;
    width: 90px;
    height: 70px;
}
.rotate:after {
    content:'';
    position:absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    -webkit-transform: rotate(20deg);
    -moz-transform: rotate(20deg);
    -o-transform: rotate(20deg);
    -ms-transform: rotate(20deg);
    transform: rotate(20deg);
    background: #0D6385;
    z-index:-1;
}
.nororate {
    position: absolute;
    top: 30px;
    left: 50px;
    width: 50px;
    height: 50px;
}
li {
    display:block;
    float:left;

}
nope
  • 1
  • 2