如何控制旋转元素内元素的 css 旋转？

Question

我想在一些列表元素中插入一些字形，我希望方形列表元素的旋转为-45°，但里面的 link 以保持其度数处于正常状态我该怎么做这是我目前工作的一个例子 example

代码在这里： 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;}

Answer 1

请看一下 fiddle https://jsfiddle.net/nileshmahaja/rhmwqyaf/1/

我刚刚更改了 css 锚标记元素的样式如下

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

如何控制旋转元素内元素的 css 旋转？

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

css

transformation

rotation