Shulou(Shulou.com)06/02 Report--

This article will explain in detail which is the attribute to achieve the rotation effect in css3. The editor thinks it is very practical, so I share it with you as a reference. I hope you can get something after reading this article.

The property that implements the rotation effect in css3 is "transform". The transform attribute is used to apply a 2D or 3D transformation to an element and can be rotated when used with the rotate (), rotate3d (), rotateX (), rotateY (), or rotateZ () functions.

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

The property that implements the rotation effect in css3 is "transform".

The transform attribute is used to apply a 2D or 3D transformation to an element, which can be rotated when used in conjunction with the following functions:

Rotate (angle) defines 2D rotation and specifies the angle in the parameters.

Rotate3d (XMagneyMagnez.Angle) defines 3D rotation.

RotateX (angle) defines 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.

Example 1:

Div {width:200px; height:100px; background-color:yellow; / * Rotate div * / transform:rotate (7deg);-ms-transform:rotate (7deg); / * IE 9 * /-webkit-transform:rotate (7deg); / * Safari and Chrome * /} Hello

Example 2:

*, *: after, *: before {box-sizing: border-box;} body {background: # F5F3F4; margin: 0 Padding: 10px; font-family: 'Open Sans', sans-serif; text-align: center;} H2 {color: # 4c4c4c Font-weight: 600; border-bottom: 1px solid # ccc;} h3, h5 {font-weight: 400; color: # 4d4d4d } .card {display: inline-block; margin: 10px; background: # fff; padding: 15px Min-width: 200px; box-shadow: 0 3px 5px # ddd; color: # 555;} .card .box {width: 100px Height: 100px; margin: auto; background: # ddd; cursor: pointer; box-shadow: 00 5px # ccc inset } .card .box .fill {width: 100px; height: 100px; position: relative; background: # 03A9F4 Opacity: .5; box-shadow: 00 5px # ccc;-webkit-transition: 0.3s; transition: 0.3s } .card p {margin: 25px 00;} .cards: hover .fill {- webkit-transform: rotate (45deg); transform: rotate (45deg) } .rotateX: hover .fill {- webkit-transform: rotateX (45deg); transform: rotateX (45deg) } .rotateY: hover .fill {- webkit-transform: rotateY (45deg); transform: rotateY (45deg) } .rotateZ: hover .fill {- webkit-transform: rotate (45deg); transform: rotate (45deg) } .scale: hover .fill {- webkit-transform: scale (2,2); transform: scale (2,2) } .scaleX: hover .fill {- webkit-transform: scaleX (2); transform: scaleX (2) } .scaley: hover .fill {- webkit-transform: scaleY (2); transform: scaleY (2);} CSS3 element rotation

Rotate (45deg)

RotateX (45deg)

RotateY (45deg)

RotateZ (45deg)

About "which is the attribute to achieve rotation effect in css3" this article is shared here, I hope the above content can be of some help to you, so that you can learn more knowledge, if you think the article is good, please share it out for more people to see.

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.