Shulou(Shulou.com)05/31 Report--

This article introduces the relevant knowledge of "which attribute of css3 controls the direction of rotation". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

The attribute that css3 controls the direction of rotation is the transform attribute; this attribute is used with the scale () method to control the 2d rotation direction of the element, and this attribute is used with the scale3d () method to control the 3D rotation direction of the element, with the syntax of "transform:rotate3d (xmemy _ rez)".

The operating environment of this tutorial: windows10 system, CSS3&&HTML5 version, Dell G3 computer.

What is the property of css3 that controls the direction of rotation

In CSS3, the function of transform can be used to realize the rotation, scaling, tilting and moving of text or image.

Browser support

So far: browsers above Safari3.1, Chrome8, Firefox4 and Opera10 support this attribute.

2d rotation

Using the rotate method, add an angle value to the parameter, followed by the "deg" text that represents the angle unit, and the rotation direction is clockwise.

Transform:rotate (45deg)

3D rotation

Use rotateX method, rotateY method and rotateZ method to rotate the element around the X axis, Y axis and Z axis respectively, and add the angle value to the parameter. The angle value is followed by the deg text that represents the angle unit, and the rotation direction is clockwise.

Transform:rotateX (45deg); transform:rotateY (45deg); transform:rotateZ (45deg); transform:rotateX (45deg) rotateY (45deg) rotateZ (45deg); transform:scale (0.5) rotateY (45deg) rotateZ (45deg)

Examples are as follows:

Div {margin:30px;width:200px;height:100px;background-color:yellow;/* Rotate div * / transform:rotate (9deg);-ms-transform:rotate (9deg); / * Internet Explorer * /-moz-transform:rotate (9deg); / * Firefox * /-webkit-transform:rotate (9deg); / * Safari and Chrome * /-o-transform:rotate (9deg); / * Opera * /} Hello World

Output result:

This is the end of the content of "which property of css3 controls the direction of rotation". Thank you for your reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.