我们经常会在页面的左上角或者右上角看到类似如图所示的标签，比如页面的链接（最常使用）等，下面我们就实现一个简单的标签
实现步骤是先做一个水平长条，使用CSS3的transform来实现旋转，如果是在左上角的话就逆时针旋转45度，右上角顺时针旋转45度。
代码：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title></title> 5 <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> 6 <style> 7 .demo{ 8 display: inline-block; 9 height: 20px; 10 width: 200px; 11 background: #f00; 12 text-align: center; 13 margin-top: 40px; 14 margin-left: -45px; 15 text-decoration: none; 16 color:#fff; 17 -webkit-transform: rotate(-45deg); 18 -moz-transform: rotate(-45deg); 19 -ms-transform: rotate(-45deg); 20 -o-transform: rotate(-45deg); 21 transform: rotate(-45deg); 22 } 23 </style> 24 </head> 25 <body> 26 <a class="demo" href="javasript:;">Follow me</a> 27 </body> 28 </html>
transform：
- 浏览器支持
Internet Explorer 10、Firefox、Opera 支持 transform 属性。
Internet Explorer 9 支持替代的 -ms-transform 属性（仅适用于 2D 转换）。
Safari 和 Chrome 支持替代的 -webkit-transform 属性（3D 和 2D 转换）。
Opera 只支持 2D 转换。
- 定义和用法
transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
默认值：none
继承性：no - 语法
transform: none|transform-functions;
值 描述 none 定义不进行转换。 matrix(n,n,n,n,n,n) 定义 2D 转换，使用六个值的矩阵。 matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定义 3D 转换，使用 16 个值的 4x4 矩阵。 translate(x,y) 定义 2D 转换。 translate3d(x,y,z) 定义 3D 转换。 translateX(x) 定义转换，只是用 X 轴的值。 translateY(y) 定义转换，只是用 Y 轴的值。 translateZ(z) 定义 3D 转换，只是用 Z 轴的值。 scale(x,y) 定义 2D 缩放转换。 scale3d(x,y,z) 定义 3D 缩放转换。 scaleX(x) 通过设置 X 轴的值来定义缩放转换。 scaleY(y) 通过设置 Y 轴的值来定义缩放转换。 scaleZ(z) 通过设置 Z 轴的值来定义 3D 缩放转换。 rotate(angle) 定义 2D 旋转，在参数中规定角度。 rotate3d(x,y,z,angle) 定义 3D 旋转。 rotateX(angle) 定义沿着 X 轴的 3D 旋转。 rotateY(angle) 定义沿着 Y 轴的 3D 旋转。 rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。 skew(x-angle,y-angle) 定义沿着 X 和 Y 轴的 2D 倾斜转换。 skewX(angle) 定义沿着 X 轴的 2D 倾斜转换。 skewY(angle) 定义沿着 Y 轴的 2D 倾斜转换。 perspective(n) 为 3D 转换元素定义透视视图。