- index.html
- style.css
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<title>Inclinación y rotación de texto decorativo</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="content">
<article>
<h1><span>¡CSS3 manda!</span></h1>
<p>border-radius border-image break-after break-before break-inside columns transition transition-delay transition-duration transition-timing-function transition-property backface-visibility perspective perspective-origin transform transform-origin transform-style background-clip background-origin background-size box-shadow box-decoration-break opacity @keyframes animation animation-delay animation-direction animation-duration</p>
</article>
</div>
</body>
</html>
CSS
body {
height: 100%;
margin: 0;
padding: 0;
background-color: #2ecc40;
color: #ffffff;
font-family: "Arial Narrow", "Arial", sans-serif;
}
.content {
height: 100%;
overflow: hidden;
}
article {
position: relative;
}
article h1 {
position: relative;
z-index: 1;
width: 200px;
margin: 100px auto;
padding: 30px;
font-size: 30px;
text-align: center;
background-color: black;
}
h1 span {
display: inline-block;
}
article p {
position: absolute;
top: -200px;
left: -150px;
width: 150%;
font-size: 50px;
opacity: 0.15;
}
Ha ido a otra página
Haga clic dentro del mininavegador para poner el foco en esta ventana.
ObjetivosRealizado
0
- Inclina el título
h115°hacia la derecha. - Inclina el
spandel título15°hacia la izquierda. - Gira el
pque está dentro dearticle15°en sentido contrario a las agujas del reloj.