Home > Developer > Web Develop
We often see similar tags in the upper-left or upper-right corner of the page, such as the link to the page (most commonly used), and then we implement a simple label
The implementation step is to do a horizontal bar, using the CSS3 transform to achieve rotation, if it is in the upper left corner of the counterclockwise rotation of 45 degrees, the upper right corner rotated 45 degrees clockwise.
Code:
1 <!DOCTYPE HTML>2 <HTML>3 <Head>4 <title></title>5 <Metahttp-equiv= "Content-type"content= "Text/html;charset=utf-8">6 <style>7 . Demo{8 Display:Inline-block;9 Height:20px; Ten width:200px; One background:#f00; A text-align:Center; - Margin-top:40px; - Margin-left:-45px; the text-decoration:None; - Color:#fff; - -webkit-transform:Rotate ( -45deg); - -moz-transform:Rotate ( -45deg); + -ms-transform:Rotate ( -45deg); - -o-transform:Rotate ( -45deg); + Transform:Rotate ( -45deg); A } at </style> - </Head> - <Body> - <aclass= "Demo"href= "Javasript:;">Follow me</a> - </Body> - </HTML>
Transform
Internet Explorer 10, Firefox, and Opera support transform properties.
Internet Explorer 9 supports an alternative-ms-transform attribute (only for 2D conversions).
Safari and Chrome support alternative-webkit-transform attributes (2D conversion).
Opera only supports 2D conversions.
transform:none| transform-functions;
| value | Description |
|---|---|
| None | The definition does not convert. |
| Matrix (n,n,n,n,n,n) | Defines a 2D conversion, using a matrix of six values. |
| Matrix3D (n,n,N,n,n, N,n,N,N, n,n,n,n,n,n,n) | Defines a 3D conversion, using a 4x4 matrix of 16 values. |
| Translate (x,y) | Defines a 2D transformation. |
| Translate3d (x,y,z) | Defines a 3D transformation. |
| TranslateX (x) | Define the conversion, just with the value of the X-axis. |
| Translatey (y) | Define the conversion, just use the Y-axis value. |
| Translatez (z) | Defines a 3D conversion, just using the Z-axis value. |
| Scale (x,y) | Defines a 2D scaling transformation. |
| Scale3d (x,y,z) | Defines a 3D scaling transformation. |
| ScaleX (x) | Define the zoom transformation by setting the value of the X-axis. |
| ScaleY (y) | Define the zoom transformation by setting the value of the Y-axis. |
| Scalez (z) | Define a 3D scaling transformation by setting the value of the Z-axis. |
| Rotate (angle) | Defines the 2D rotation, which specifies the angle in the parameter. |
| Rotate3d (x,y,z,angle) | Defines the 3D rotation. |
| Rotatex (angle) | Defines the 3D rotation along the X-axis. |
| Rotatey (angle) | Defines a 3D rotation along the Y-axis. |
| Rotatez (angle) | Defines a 3D rotation along the Z-axis. |
| Skew (x-angle,y-angle) | Defines a 2D tilt transition along the X and Y axes. |
| SKEWX (angle) | Defines a 2D tilt transition along the X-axis. |
| Skewy (angle) | Defines a 2D tilt transition along the Y-axis. |
| Perspective (n) | Defines a Perspective view for 3D transformation elements. |
CSS3 to label the page
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
