>我创建了一个CSS按钮。我想在按钮中垂直旋转文本,但只旋转文本。我怎样才能做到这一点。我的 css 按钮代码:
.button_example{
border:1px solid #7d99ca;
-webkit-border-radius: 3px;
display: table-column-group;
/*-webkit-transform: rotate(-90deg); rotate the whole button*/
-moz-border-radius: 3px;
border-radius: 5px;
font-size:22px;
font-family:Impact, Charcoal, sans-serif;
padding: 10px 10px 10px 10px;
text-decoration:none;
display:inline-block;
text-shadow: -1px -1px 0 rgba(0,0,0,0.3);
font-weight:strong;
color: #00a19c;
color: #3388fa;
background: transparent; /* size and positioning*/
margin-left: 121px;
margin-top: 1px;
width: 24px;
height: 485px;
font-size:14px;
font-weight:700;
position:absolute;left:1120px;top:180px;
background-image: linear-gradient(to bottom, #FFFFFF, #FFFFFF);
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#FFFFFF, endColorstr=#FFFFFF);
}
知道如何只旋转文本吗?
我不知道
任何其他方法可以在不添加按钮内的范围(或任何其他内联元素)来应用转换样式的情况下完成此操作。
.CSS:
button span {
display: inline-block;
transform: rotate(-90deg);
}
.HTML:
<button><span>Your Text</span></button>
请记住为 Internet Explorer 添加供应商前缀(-moz、-webkit、-ms、...)和回退,因为它不支持在没有过滤器的情况下在较低版本中轮换。
以下是使用 CSS 旋转的基本示例: http://css-tricks.com/snippets/css/text-rotation/
将文本旋转 90 度:
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
更多 这里 : 垂直文本方向