Represents a reference to a work and must include the title of the work.

css:font-style

Font style has two values for tilting text, “italic” and “oblique”.

<style> .demo-italic { font-style: italic; } .demo-oblique { font-style: oblique; "> <div style =" max-width: 100%; clear: both; min-height: 1em; Keluqinngshanwai, xingzhoulvshuiqian < / div > < div class = "demo - oblique" > outside the castle peak road, row boat before the green water; keluqinngshanwai,xingzhoulvshuiqian </div>Copy the code

Effect:

Although ITALIC and OBLIQUE represent font skew, their skew principles are different. Italic makes fonts display in a slanted version of themselves; oblique forces the current font to be slanted at an Angle.

transform

The transform can achieve a more controlled, more intense tilt.

The CSS uses transform

The transform has two properties: ** “rotate” and “skew”

<style> .demo-rotate { width: 200px; transform: rotate(30deg); } .demo-skew { width: 200px; transform: skew(-30deg); </style> <div class="demo-rotate"> </div> <div class="demo-skew"> <div class="demo-skew"> <div class="demo-skew"> <div class="demo-skew"> </div>Copy the code

The ROTATE () function of the CSS defines a transformation that rotates elements around a fixed point (as specified by the transform-origin property) without deformation. The specified Angle defines the measure of rotation. If the Angle is positive, it rotates clockwise, otherwise it rotates counterclockwise. A rotation of 180° is also known as point reflection.

The skew() function defines the skew conversion of an element on a two-dimensional plane. The result is a data type

Rotate means to rotate and skew means to skew.

Use transform in SVG

The text tag in SVG is used to carry text, which can be rotated using the Transform property of text.

< SVG width = '300' height = '300' XMLNS = "http://www.w3.org/2000/svg" > < text font, size = '14' transform = 'rotate (45)' > a lonely island in the mist, Sailing on white waves. </text> </svg>Copy the code

Use transform in canvas

To simplify the transform method, the Canvas can use the rotate method when only doing rotation. The rotate method in canvas is similar to the rotate property in the TRANSFORM CSS.

<style> #rotate-demo{ width: 300px; height: 300px; } </style> <canvas id="rotate-demo"> </canvas> let ctx = document.getElementById('rotate-demo').getContext('2d'); ctx.font="14px Arial"; Rotate (30* math.pi / 150) rotate(30* math.pi / 150) rotate(30* math.pi / 150) rotate(30* math.pi / 150) rotate(30* math.pi / 150) rotate(50,50)Copy the code

A use scenario: to achieve text watermarking effect

Many web pages need text watermarking, we introduce a method to implement text watermarking with SVG.

Before introducing the implementation, you need to know that SVG can be displayed as a background-image as well as as a tag in HTML.

.svg-bg{ width: 500px; height: 500px; background-image: url("data:image/svg+xml,%3Csvg width='150' height='150' xmlns='http://www.w3.org/2000/svg'%3E%3Ctext x='50%25' y='50%25' Font-size ='14' fan-opacity ='0.2' text-anchor='middle' dominant-baseline='middle' transform='rotate(-45, 100 100)'%3E %3C/text%3E%3C/ SVG %3E"); } <div class="svg-bg"></div>Copy the code

Effect:

There are two advantages to make text watermark in this way. First, when using CTRL + F full-text search, the content cannot be searched because it is the background image. Second, JS can be used to dynamically generate SVG text content, which is convenient for the front end to control the text watermark

conclusion

Today I have introduced some ways to tilt the text, if you have other methods, welcome to private message or comment.

The resources

[1] developer.mozilla.org/zh-CN/docs/… [2] www.zhangxinxu.com/wordpress/2…

We sincerely invite you to pay attention to the public account: Nhat hanzhou I will update technical articles every week, and learn and progress together with you.