Interactive online courses HTML Academy
2026-03-09 10:48 Diff
https://htmlacademy.org/courses/dynamic/2d-transforms/rotate-text

Loading…
Everything will be ready in few seconds

  • Theory
  • Theory
  • Comments

Rotating the text in blocks

This is where the adventures of the wizard Pendalf end, so let’s return to the real world and look at techniques for creating interface elements and decorative effects using CSS transforms.

In this assignment, we will turn the article title upside down and place it on its side. To do this, we will use the already familiar properties transform-origin and transform: rotate.

Comments

  • index.html
  • style.css

HTML

<!DOCTYPE html> <html lang="en"> <head> <title>Rotating the text in blocks</title> <meta charset="utf-8"> <link rel="stylesheet" href="style.css"> </head> <body> <article> <h1>Collinear Vectors</h1> <p>A divergent series generates a collinear Cauchy’s criterion for convergence, which is something that even grammar school students know. It has not been proven that the Taylor series specifies an abstract vector, thereby clearly proving all of the nonsense laid out above.</p> <p>The Gauss-Ostrogradsky Theorem neutralizes the axiomatic double integral, which is not surprising. Without going into details, we can say that the irrational number directly orders the aspiring triple integral, which is what we were asked to prove. It is easy to verify that Fermat’s theorem is able to shed light on the complex graph of a function. We will leave the further calculations for students to complete as a simple homework assignment.</p> </article> </body> </html>

CSS

body { margin: 0; padding: 0; background-color: #f5f5f5; font-family: "Arial Narrow", "Arial", sans-serif; } article { position: relative; max-width: 400px; margin: 50px auto; padding: 1px 20px; line-height: 1.5; background-color: white; box-shadow: 0 0 3px #cccccc; } h1 { margin: 0.7em 0; }

Thanks! We’ll fix everything at once!

The code has changed, click “Refresh” or turn autorun on.

You’ve gone to a different page

Click inside the mini-browser to shift the focus onto this window.

100%

  1. For h1, assign absolute positioning and the coordinates top — 10px and  left — 0.
  2. Then assign article a solid border on the left (border-left) that is 40px thick and has the color #7fdbff.
  3. For h1, set transform-origin to the value 0 0, and rotate it 90° clockwise.