<html>
<head>
<title>Transitions</title>
<style>
@font-face {
font-family: ‘RieslingRegular’;
src: url(‘fonts/Riesling-fontfacekit/riesling-webfont.eot’);
src: url(‘fonts/Riesling-fontfacekit/riesling-webfont.eot?#iefix’) format(’embedded-opentype’),
url(‘fonts/Riesling-fontfacekit/riesling-webfont.woff’) format(‘woff’),
url(‘fonts/Riesling-fontfacekit/riesling-webfont.ttf’) format(‘truetype’),
url(‘fonts/Riesling-fontfacekit/riesling-webfont.svg#RieslingRegular’) format(‘svg’);
font-weight: normal;
font-style: normal;
}
body {
font-family: RieslingRegular;
font-size: 2em;
width: 100%;
background: #ccc;
min-width: 980px;
max-width: 1000px;
}
#gallery {
width:90%;
height: 400px;
margin: 0 auto;
background: rgba(222, 222, 40, 0.5);
}
#gallery h2{
text-align: center;
}
#gallery div {
margin-top: 5%;
padding: 1%;
margin-left: 6%;
width: 15%;
border: solid 1px #fff;
float:left;
/*
transition-property: width;
transition-duration: 1s;
transition-timing-function: linear;
transition-delay: 2s;
transition: width 1s linear 2s;
#######################################
-moz-transition-property: transform;
-webkit-transition-property: transform;
transition-property: transform;
-moz-transition-duration: 1s;
-webkit-transition-duration: 1s;
transition-duration: 1s;
*/
-webkit-transition: all 0.8s ease; /*ease / ease-in / ease-out ease-in-out*/
color: rgba(222, 222, 40, 0.5);
}
#gallery div:hover{
-webkit-transform: scale(1.2);
-webkit-transform-origin: center top;
-webkit-border-radius: 10px 10px 10px 10px;
box-shadow: 1px 3px 5px #000;
color: #000;
}
#gallery #uno {
background: url(uno.jpg) no-repeat;
}
#gallery #dos {
background: url(dos.jpg) no-repeat;
}
#gallery #tres {
background: url(tres.jpg) no-repeat;
}
#gallery #cuatro {
background: url(cuatro.jpg) no-repeat;
}
#gallery p{
text-align: right;
margin-top: 150px;
font-weight: bold;
}
/*http://www.paulrhayes.com/experiments/cube-3d/*/
</style>
</head>
<body>
<div id=”gallery”>
<h2>Que bonito es el CSS3</h2>
<div id=”uno”>
<p>construir</p>
</div>
<div id=”dos”>
<p>escalera</p>
</div>
<div id=”tres”>
<p>de madera</p>
</div>
<div id=”cuatro”>
<p>en casa</p>
</div>
</div>
</body>
</html>