OBINTUSACADEMY
HOME CONTACT SERVICES PRIVACY
C.B MS-PACKAGES CSS
CSS - 2D Transform

BASIC

Introduction to CSS Getting Started CSS Basic Structure CSS Syntax CSS Selectors CSS Universal Selector CSS Element Selector CSS ID Selector CSS Class Selector CSS Group Selector CSS Descendant Selector CSS Child Selector CSS Adjacent Sibling Selector CSS General Sibling Selector CSS Pseudo Element Selector CSS Pseudo Class Selector CSS Attribute Selector CSS Comments CSS Rule CSS Colors CSS Foreground and Background Color CSS Fonts CSS Background CSS Background Clip CSS Background Origin CSS Background Size CSS Text/Word Formatting CSS Images

INTERMEDIATE

CSS Borders CSS Margin CSS Padding CSS Dimension CSS Outline CSS Lists CSS Tables CSS Links CSS Overflow CSS Cursor CSS Float CSS Clear CSS Box Sizing CSS Display CSS Positioning CSS Z-Indexing CSS Opacity CSS Icons CSS Media Queries

ADVANCE

CSS Multiple Backgrounds CSS Gradient CSS Shadow CSS 2D Transform CSS 3D Transform CSS Transition CSS Animation CSS Image Reflection CSS Masking CSS Navigation Bar CSS Dropdown CSS !important CSS Specificity CSS Math Functions CSS Web Fonts CSS Pagination CSS Multiple Columns CSS Resizing and Offset CSS Variables CSS Conclusion

2D Transform

PREVIOUS NEXT

2D transform in CSS is used to perform simple transformation manipulations (such as move, scale, rotate, etc) in a 2-dimensional area. The transform property is used to define this effect.

2D Transform Methods

translate() - moves the element from its position to the x and y axis values specified.

TRY IT OUT YOURSELF

translateX() - moves the element from its position to the x-axis value specified.

TRY IT OUT YOURSELF

translateY() - moves the element from its position to the y-axis value specified.

TRY IT OUT YOURSELF

rotate() - moves the element in a clockwise or anti-clockwise direction, based on the given value (in degrees).

TRY IT OUT YOURSELF

scale() - increases or decreases the size of the element based on the width and height values specified.

TRY IT OUT YOURSELF

scaleX() - increases or decreases the width of the element based on the value specified.

TRY IT OUT YOURSELF

scaleY() - increases or decreases the height of the element based on the value specified.

TRY IT OUT YOURSELF

skew() - skews the element along the x and y axis based on the values specified (in degrees).

TRY IT OUT YOURSELF

skewX() - skews the element along the x-axis based on the value specified (in degrees).

TRY IT OUT YOURSELF

skewY() - skews the element along the y-axis based on the value specified (in degrees).

TRY IT OUT YOURSELF
note
NOTE:

Skew - To move obliquely (sideways) in a particular direction.


matrix() - uses all the 2d transform methods.

TRY IT OUT YOURSELF

Transform Origin

The transform-origin property is used to change the position or location of the element that is already transformed.

  • Syntax is as follows: transform-origin: x-axis y-axis z-axis | initial/inherit
  • x-axis takes values like: left, center, right, relative and absolute units (%, px, etc).
  • y-axis takes values like: left, center, right, relative and absolute units (%, px, etc).
TRY IT OUT YOURSELF

Transform Style

The transform-style property is used to specify how nested or child elements should be rendered in a 3D space. It is used together with the transform property.

TRY IT OUT YOURSELF
PREVIOUS NEXT
ADVERTISEMENTS

LEARNING IS A CONTINOUS PROCESS - PRACTICE MAKES PERFECT