如何控制旋转元素内元素的CSS旋转?

时间:2015-04-17 17:57:23

标签: css rotation transformation

我想在一些列表元素中插入一些字形,我希望方形列表元素的旋转为-45°,但内部的链接使其保持正常状态我怎么能在这里做的是一个例子到目前为止我的工作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;}

1 个答案:

答案 0 :(得分:1)

请查看小提琴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;
}