Las capacidades de realizar transformaciones son una de las grandes ventajas introducidas en CSS3.
Mediante el uso de la perspectiva y la rotación, podemos crear interesantes efectos, para los cuales anteriormente se requería de otras tecnologías.
A continuación vemos el código para aplicar una perspectiva sobre una caja.
<!DOCTYPE html>
<html>
<head>
<title>CSS Perspective</title>
<style>
#boxcont {
background-color: orange;
width: 200px;
height: 200px;
border: 1px solid black;
margin: 70px;
}
#boxint {
background-color: green;
width: 200px;
height: 200px;
border: 1px solid black;
transform: perspective( 400px ) rotateY( 45deg );
}
</style>
</head>
<body>
<div id="boxcont">
<div id="boxint"></div>
</div>
</body>
</html>
Más sobre Diseño y desarrollo Web
Autor de los libros: Webmaster Profesional, HTML5: Comprenda el cambio y Apps HTML5 para móviles. Soy especialista en Desarrollo Web. Realizo proyectos basados en Inteligencia Artificial. Colaboré como autor y editor de contenidos para revistas, colecciones y diversos medios impresos y digitales. Brindo capacitaciones, clases de formación y consultorías sobre lenguajes de programación y herramientas para Desarrollo Web y móvil en modalidad online y presencial.
Deja una respuesta