Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Skewing | Transformations
Advanced CSS Techniques

SkewingSkewing

skew() allows us to deviate an element's sides to the coordinate axes on a specific angle. The angle must be specified in degrees (deg). Also, we can determine the skew only for the x-axis or y-axis. The syntax is following:

  • skew() accepts 2 values. The X_angle value specifies the skew angle for the x-axis. The Y_angle value specifies the skew angle for the y-axis. If we don't set the second value (Y_angle), the browser understands it as skewX();
  • skewX(angle) specifies the skew along the x-axis;
  • skewY(angle) specifies the skew along the y-axis.

Let's run the following example to see what we can get with the help of skewing:

html

index.html

css

index.css

js

index.js

Select the correct statement.

Selecione a resposta correta

Tudo estava claro?

Seção 5. Capítulo 6
course content

Conteúdo do Curso

Advanced CSS Techniques

1. Introduction

Course OverviewCourse FocusCourse TopicsHow to Succeed

2. Item Positioning

What is Positioning?Relative PositioningChallenge: Relative PositioningAbsolute PositioningChallenge: Absolute PositioningFixed PositioningChallenge: Fixed PositioningSticky PositioningChallenge: Sticky PositioningStacking OrderChallenge: Stacking OrderContent Overflow

3. Transitions

What is Transition?Selecting Transition PropertyTransition DurationTransition Time FunctionTransition Time DelayTransition CombinationChallenge: Adding Transition

4. Animations

What is Animation?Specifying Time of the AnimationControlling Animation Play Quantity and DirectionManaging Animation StateAnimation CompositionChallenge: Adding Animation

5. Transformations

What is Transformation?ScalingRotatingChallenge: Adding Scaling & RotatingTranslateSkewingPerspectiveChallenge: Adding Translating and Skewing

6. Adaptive/responsive websites and apps

What is Adaptive/Responsive Design?@media QueryAdaptive - Responsive layoutsInspecting the Web PageChallenge: Inspecting Adaptive/Responsive Layout

7. Preprocessors

What is Preprocessor?Sass SyntaxSass VariablesSass Numeric OperatorsSass Nesting@extend DirectiveFolder-File Structure

Advanced CSS Techniques

SkewingSkewing

skew() allows us to deviate an element's sides to the coordinate axes on a specific angle. The angle must be specified in degrees (deg). Also, we can determine the skew only for the x-axis or y-axis. The syntax is following:

  • skew() accepts 2 values. The X_angle value specifies the skew angle for the x-axis. The Y_angle value specifies the skew angle for the y-axis. If we don't set the second value (Y_angle), the browser understands it as skewX();
  • skewX(angle) specifies the skew along the x-axis;
  • skewY(angle) specifies the skew along the y-axis.

Let's run the following example to see what we can get with the help of skewing:

html

index.html

css

index.css

js

index.js

Select the correct statement.

Selecione a resposta correta

Tudo estava claro?

Seção 5. Capítulo 6
some-alt