Saltar al contenido principal
Codigo Heroe
Tarea anterior
Transformaciones 2D17/29
A la lista de tareas
  1. 1. Desplazamiento horizontal con translateX
  2. 2. Desplazamiento vertical con translateY
  3. 3. Desplazamiento en dos ejes con translate
  4. 4. Cambios de tamaño con scale
  5. 5. Rotación y orden de las transformaciones
  6. 6. Combinación de desplazamiento y escala
  7. 7. Recorridos con translate
  8. 8. Combinación de rotate y translate
  9. 9. Inclinación con skewX y skewY
  10. 10. Combinación de escala, desplazamiento y rotación
  11. 11. Reflejos con valores negativos de scale
  12. 12. transform-origin y cambios de escala
  13. 13. Transiciones de escala y transform-origin
  14. 14. transform-origin y rotación
  15. 15. Rotación animada y transform-origin
  16. 16. Centrado con transform: translate
  17. 17. Rotación del título de un bloque
  18. 18. Inclinación y rotación de texto decorativo
  19. 19. Sombras con pseudoelementos y rotate
  20. 20. Efectos al pasar el cursor: rotación de un ícono
  21. 21. Efectos al pasar el cursor: escala y opacidad
  22. 22. Efectos al pasar el cursor: aparición de un ícono
  23. 23. Efectos al pasar el cursor: galería
  24. 24. Cartas superpuestas con rotate
  25. 25. Menú circular: posición y origen de rotación
  26. 26. Menú circular: rotación e inclinación
  27. 27. Menú circular: orientación de los enlaces
  28. 28. Menú circular: forma y recorte
  29. 29. Menú circular: añadir opciones
Siguiente tarea
  • Matriz de skills
  • Cursos
  • Registro
  • Iniciar sesión

Loading…
En unos segundos, estará listo.

  • Teoría
  • Teoría

Rotación del título de un bloque

Aquí terminan las aventuras del mago Pendalf. Volvamos al mundo real para explorar cómo crear elementos de interfaz y efectos decorativos mediante transformaciones CSS.

En este ejercicio giraremos el título de un artículo y lo colocaremos a un lado. Para eso usaremos las propiedades que ya conocemos: transform-origin y transform: rotate.

  • index.html
  • style.css
HTML
<!DOCTYPE html> <html lang="es"> <head> <title>Rotación del título de un bloque</title> <meta charset="utf-8"> <link rel="stylesheet" href="style.css"> </head> <body> <article> <h1>Vectores colineales</h1> <p>Una serie divergente genera un criterio colineal de convergencia de Cauchy, como sabe cualquier estudiante. No está demostrado que la serie de Taylor especifique un vector abstracto, lo que deja en evidencia todos los disparates anteriores.</p> <p>El teorema de Gauss-Ostrogradski neutraliza una integral doble axiomática, como era de esperarse. Un número irracional, sin entrar en detalles, ordena directamente una integral triple que tiende a algo, que es lo que queríamos demostrar. Es fácil comprobar que el teorema de Fermat hace girar la gráfica compleja de una función. Dejaremos los cálculos restantes como una sencilla tarea para estudiantes.</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; }

El código ha cambiado, haz clic en "Actualizar" o activa la ejecución automática.

Ha ido a otra página

Haga clic dentro del mininavegador para poner el foco en esta ventana.

100%
ObjetivosRealizado
0
    1. Asigna posicionamiento absoluto a h1, con top: 10px y left: 0.
    2. Añade a article un borde izquierdo border-left sólido, de 40px y de color #7fdbff.
    3. Asigna a h1 un transform-origin de 0 0 y gíralo 90° en el sentido de las agujas del reloj.
    Codigo Heroe

    © 2023-2026, codigoheroe.com