How to rotate css

In css, you can use the transform attribute to achieve element rotation. When the value is set to "rotate (angle)", 2D rotation can be achieved; when the value is "rotateX (angle)", it can be rotated along the X axis, and "rotateY" (angle)" can be rotated along the Y axis, and "rotateZ(angle)" can be rotated along the Z axis.

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

TheTransform property applies a 2D or 3D transformation to the element. This property allows you to rotate, scale, move, tilt, etc. the element. The

Transform attribute has 5 attribute values for setting translation:

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

• rotate3d(x,y,z,angle) Define 3D rotation.

• rotateX(angle) Defines a 3D rotation along the X-axis.

• rotateY(angle) Defines 3D rotation along the Y axis.

• rotateZ(angle) Defines 3D rotation along the Z axis.

Code example:

HTML code:

 
 
 
 
 
rotate(45deg) 
 
 
 
 
 
 
rotateX(45deg)
 
 
 
 
 
 
rotateY(45deg)
 
 
 
 
 
 
rotateZ(45deg) 
 
 
Perspective : 100
 
 
 
 
 
 
rotateX(90deg)
 
 
 
 
 
 
rotateY(45deg)
 
 
 
Perspective : 200
 
 
 
 
 
 
rotateX(90deg)
 
 
 
 
 
 
rotateY(45deg)
 
 
  
Transform origin
 
 
 
 
 
transform-origin : 100% 0 0 
rotate(45deg)
 
 
 
 
 
 
transform-origin : 0 100% 0
rotate(45deg)
 
 
 
 
 
 
transform-origin : 0 100% 0
rotateX(45deg)
 
 
 
 
 
 
transform-origin : 100% 0 0
rotateX(45deg)
 
 
 
 
 
 
transform-origin : 0 100% 0 
rotateY(45deg)
 
 
 
 
 
 
transform-origin : 100% 0 0
rotateY(45deg)
 

css code:

*, *:after, *:before { box-sizing: border-box; } body { background: #F5F3F4; margin: 0; padding: 10px; font-family: 'Open Sans', sans-serif; text-align: center; } h1 { color: #4c4c4c; font-weight: 600; border-bottom: 1px solid #ccc; } h2, h4 { 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: 0 0 5px #ccc inset; } .card .box .fill { width: 100px; height: 100px; position: relative; background: #03A9F4; opacity: .5; box-shadow: 0 0 5px #ccc; -webkit-transition: 0.3s; transition: 0.3s; } .card p { margin: 25px 0 0; } .rotate: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); } .perspective-100 .box { -webkit-perspective: 100px; perspective: 100px; } .perspective-200 .box { -webkit-perspective: 200px; perspective: 200px; } .to-100-0-0 { -webkit-transform-origin: 100% 0 0; transform-origin: 100% 0 0; } .to-0-100-0 { -webkit-transform-origin: 0 100% 0; transform-origin: 0 100% 0; }

(Learning video sharing:css video tutorial)

The above is the detailed content of How to rotate css. For more information, please follow other related articles on the PHP Chinese website!