Rotar capas con css

Este es un ejercicio sencillo para lograr la rotación de una capa. Podéis ver un ejemplo pulsando aquí

<style>

	* {
		margin: 0;
		padding: 0;
		text-align: center;
	}

	#header {
		width: 100%;
		height: 300px;
		background-color: #000000;
		z-index: 10;
	}
	
	#main {
		width: 900px;
		height: 500px;
		margin: -178 auto;
		z-index: 100;
	}
	
	#main .block-left {
		float: left;
		margin-top: 40px;
		margin-right: 30px;
	}
	
	#main .block-right {
		float: right;
		width: 395px;
		font-size: 14px;
		margin-top: 190px;
	}
	
	#main .block-right p {
		text-align: right;
	}
	
	#main .block-left .mapa {
		-moz-transform: rotate(-10deg);
		background-color: #FFFFFF;
		border: 4px solid #FFFFFF;
		box-shadow: 0 0 5px 3px #999999;
		height: 275px;
		margin-top: 45px;
		width: 464px;
	}

</style>

Una vez declarados los estilos, tan solo nos queda diseñar el html para ver los resultados

<div id="header"></div>
<div id="main">
	<div class="block-left">
		<div class="mapa">
                      <iframe width="464" height="275" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=es&amp;geocode=&amp;q=espa%C3%B1a,+sevilla,+plaza+de+espa%C3%B1a&amp;aq=&amp;sll=37.0625,-95.677068&amp;sspn=53.477264,114.169922&amp;ie=UTF8&amp;hq=espa%C3%B1a,+sevilla,+plaza+de+espa%C3%B1a&amp;t=h&amp;ll=37.377334,-5.986267&amp;spn=0.006295,0.006295&amp;output=embed"></iframe>
		</div>
	</div>
	<div class="block-right">
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce congue laoreet augue et consequat. Pellentesque hendrerit nulla eu turpis tincidunt fringilla. Phasellus a tempus massa. Donec sed congue dolor. Aenean eget ligula est, a luctus tellus. Nunc pharetra dui ultricies sapien suscipit at cursus arcu interdum.</p>
	</div>
</div>

El único inconveniente es que solo funciona para firefox, pero para seguir con la tónica de ejercicios nos sirve.

Anuncios

Acerca de Javi Garcia
Web developer at www.dejandomarcas.com

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google photo

Estás comentando usando tu cuenta de Google. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s

A %d blogueros les gusta esto: