Ejemplo de perspectiva con CSS3

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.

perfectiva css3


<!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


Acerca de

Autor de los libros: Webmaster Profesional, HTML5: Comprenda el cambio y Apps HTML5 para móviles. Soy especialista en Diseño y Programación Web y Mobile. Colaboré como autor y editor de contenidos para revistas, colecciones y diversos medios digitales. Dicto capacitaciones y consultorías sobre lenguajes y herramientas de desarrollo Web

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*


Cursos y capacitaciones para empresas y profesionales

  • HTML & CSS (maquetado web).
  • CSS3 & Responsive Web Design (diseño web adaptado a móviles y tablets).
  • Flexbox & Grids (técnicas modernas de CSS).
  • LESS & SASS (CSS preprocessors).
  • Responsive E-mail (diseño de emails multidispositivo).
  • Bootstrap (el framework de diseño más utilizado).
  • HTML5 (Nivel inicial y Avanzado + APIs).
  • PhoneGap/Cordova (Aplicaciones para Android e iOS basadas en lenguajes Web).
  • JavaScript (Nivel inicial y avanzado con ECMAScript 6).
  • jQuery (una de las librerías más famosas de JavaScript).
  • Angular (framework para construir aplicaciones Web con JavaScript).
  • PHP & MySQL (programación del lado servidor y bases de datos).

Encontrame en las redes sociales. Contactame.