Rotation values that exceed one rotation (say, 540deg or 1.5turn) are rendered according to their remaindered value, unless animated or transitioned. One complete rotation is equal to 360deg, 6.28rad, 400grad, or 1turn. These may be deg (degrees), rad (radians), grad (gradians), or turn units. Angle units are defined by the CSS Values and Units Module Level 3. The rotate() function accepts values in angle units. Its effect is much like a windmill or pinwheel, as seen below.
Using rotate() tilts an element clockwise (positive angle values) or counter-clockwise (negative angle values). rotate()Ī rotation transform spins an element around its origin by the angle specified around the transform-origin point. Six other functions let us transform an element in a single dimension: scaleX and scaleY skewX and skewY and translateX and translateY. There are four primary two-dimensional transform functions: rotate, scale, skew, and translate. In this piece, we’ll look at 2D transform functions ( 3D functions are covered here). Three-dimensional transforms, in particular, make it possible to mimic physical objects. When combined with transitions and animations, we can create elements and interfaces that rotate, dance, and zoom. Transforms allow us to create effects and interactions that are otherwise impossible. The following is a short extract from Tiffany’s new book, CSS Master, 2nd Edition.
0 kommentar(er)
