在我们做数据表格的时候，会遇到数字竖排问题，在IE下面好解决直接用writing-mode:tb-rl;即可，但是在FF，谷歌等浏览器没有效果，但是自从有了CSS3，用Transform功能可以实现文字或图像的旋转、缩放、倾斜、移动这四种类型的变形，这四种变形分别使用rotate、 scale、skew和translate这四种方法来实现。将这四种变形结合使用，就会产生不同的效果，使用顺序不同，产生的效果是不一样的。
目前浏览器支持情况：Safari 3.1+、 Chrome 8+、Firefox 4+、Opera 10+、IE9+
一、旋转：
CSS中使用rotate方法来实现对元素的旋转，在参数中加入角度值，旋转方式为顺时针旋转。
例一：一个黄色的div元素，通过在样式代码中使用“transform: rotate(45deg)”，语句使这个div元素顺时针旋转45度。deg是CSS3的“Values and Units”模块中定义的一个角度单位。
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Transform旋转</title>
<style>
div {
font:12px Arial, Helvetica, sans-serif;
width: 300px;
margin: 150px auto;
background-color: yellow;
text-align: center;
writing-mode:tb-rl;
-webkit-transform: rotate(90deg); /* for Chrome || Safari */
-moz-transform: rotate(90deg); /* for Firefox */
-ms-transform: rotate(90deg); /* for IE */
-o-transform: rotate(90deg); /* for Opera */
}
</style>
</head>
<body>
<div>2.2412421</div>
</body>
</html>
就这样，基本所有浏览器都可以支持文字竖排，怎么样，很简单把，哈哈!!!
网友评论文明上网理性发言已有1人参与
发表评论:
评论列表