pages.courses.show.header

pages.courses.show.course_updated

pages.courses.show.subscribe

pages.courses.show.subscription_description

pages.courses.show.included.header

pages.courses.show.included.theory.value
pages.courses.show.included.exercises.value
pages.courses.show.included.questions.value
pages.courses.show.included.self_study
pages.courses.show.included.extra_materials
pages.courses.show.included.extended_material

models.attributes.base.description

This course is about transforming objects on a page using CSS Transforms Module Level 1 and CSS Transforms Module Level 2. Using transforms allows you to create effects on the page, from small visual changes to multi-step complex animations.

pages.courses.show.skills

  • Rotate, move, and distort two-dimensional objects on the page
  • Create a pseudo-three-dimensional effect using transformations
  • Transform flat objects into volumetric ones by adding a new axis for them
  • Use Transformations for three-dimensional objects
  • Create perspective and control the point of view of the object
  • Define a transformation point on an object

pages.courses.show.syllabus

1

Introduction

Learning about the course's topics and their application in practice

2

2D Transformations and moving

Learning how to use the `translate` function to move objects on the page

3

2D transformations and rotation

Learning how to rotate objects and select the rotation point using the transform-origin property

4

2D transformations and scaling

Learn how to scale HTML elements using the scale function of the transform property

5

2D transformations and tilt

Learning about the ability to skew HTML elements and the principles of element distortion on several axes

6

3D Transformations fundamentals

Discovering three-dimensional space and learning to work with the perspective of three-dimensional objects in CSS

7

3D transformations and functions

Learning to use the previously studied transformations in three-dimensional space. Understand movement, rotation, and scaling along three axes

pages.courses.show.challenges

1

«Hexlet» Logo

pages.courses.show.recommended_programs

Course Cover
  • pages.courses.pros.right_in_browser
  • pages.courses.pros.lifetime_access
  • pages.courses.pros.learn_as_you_go
pages.courses.show.subscribe

pages.courses.show.subscription_description