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

This article mainly introduces the relevant knowledge of "how to achieve 2d conversion in css3". The editor shows you the operation process through an actual case. The operation method is simple, fast and practical. I hope this article "how to achieve 2d conversion in css3" can help you solve the problem.

In css3, you can use the transform attribute with translate (), scale (), rotate (), skew (), skewX (), skewY () and other functions to achieve the 2d transformation of the element, rotate, scale, move, tilt, and so on.

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

In css3, you can use the transform attribute to achieve a 2d conversion.

The Transform attribute is applied to the 2D or 3D transformation of an element. This property allows you to rotate, scale, move, tilt, and so on.

The function of transform attribute to realize 2d conversion

Value description matrix defines a 2D transformation, using a matrix of six values. Translate (XBI y) defines 2D transformations. TranslateX (x) defines the transformation, using only the value of the X axis. TranslateY (y) defines the transformation, using only the value of the Y axis. Scale (x [, y]?) Defines a 2D scaling transformation. ScaleX (x) defines the scaling transformation by setting the value of the X axis. ScaleY (y) defines the scaling transformation by setting the value of the Y axis. Rotate (angle) defines 2D rotation and specifies the angle in the parameters. Skew defines a 2D tilt transformation along the X and Y axes. SkewX (angle) defines a 2D tilt transformation along the X axis. SkewY (angle) defines a 2D tilt transformation along the Y axis.

Example:

*, *: after, *: before {box-sizing: border-box;} body {background: # F5F3F4; margin: 0 Padding: 10px; font-family: 'Open Sans', sans-serif; text-align: center } h3, h5 {font-weight: 400; color: # 4d4d4d } .card {display: inline-block; margin: 10px; background: # fff; padding: 10px Min-width: 180px; box-shadow: 0 3px 5px # ddd; color: # 555;} .card .box {width: 60px Height: 60px; margin: auto; background: # ddd; cursor: pointer; box-shadow: 0 5px # ccc inset } .card .box .fill {width: 60px; height: 60px; 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) } .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) } .skew: hover .fill {- webkit-transform: skew (45deg, 45deg); transform: skew (45deg, 45deg) } .skewX: hover .fill {- webkit-transform: skewX (45deg); transform: skewX (45deg) } .skewY: hover .fill {- webkit-transform: skewY (45deg); transform: skewY (45deg) } .translate: hover .fill {- webkit-transform: translate (45px, 1em); transform: translate (45px, 1em) } .translateX: hover .fill {- webkit-transform: translateX (45px); transform: translateX (45px) } .translateY: hover .fill {- webkit-transform: translateY (45px); transform: translateY (45px) } .matrix: hover .fill {- webkit-transform: matrix (2,2,0,2,45,0); transform: matrix (2,2,0,2,45,0);}

Rotate (45deg)

Scale (2)

ScaleX (2)

ScaleY (2)

Skew (45deg, 45deg)

SkewX (45deg)

SkewY (45deg)

Translate (45px)

TranslateX (45px)

TranslateY (45px)

Matrix (2,2,0,2,45,0)

This is the end of the content about "how to transform css3 into 2d". Thank you for your reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

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.