Playing with CSS3 transitions

So I’ve been wrapped up in a heap of projects and professional transitions over the past three months but I thought it time to get back to making regular updates of useful information.
This really boils down to the fact that CSS3 makes me all anxious and clammy like I’m about to go on a first date. Depending on which browser you’re using, you may have a wildly different date, though. This demo works in Chome, Safari, and partially in Firefox. I’ve used the information from Zurb to put this demo together along with a few of my own tweaks. If you want to see the demo and the CSS for it  – make the jump.
It basically boils down to making use of some basic CSS3 transformations, offsets, and positioning.


ul{list-style: none outside;}
ul.polaroids {
margin: 0px 0px 18px -30px;
width: 600px;
}
ul.polaroids li {
display: inline;
}
li {
line-height: 18px;
}
/* Rotate all even images 2 degrees */
ul.polaroids li:nth-child(even) a {
-webkit-transform: rotate(2deg);
-moz-transform: rotate(2deg);
}
ul.polaroids li a {
-webkit-box-shadow: rgba(0, 0, 0, 0.246094) 0px 3px 6px;
-webkit-transform: rotate(-2deg);
-webkit-transition: -webkit-transform 0.15s linear;
background: white;
color: #333;
display: inline;
float: left;
font-family: 'Marker Felt', sans-serif;
font-size: 18px;
margin: 0px 0px 27px 30px;
padding: 20px 20px 25px;
text-align: center;
text-decoration: none;
width: auto;
overflow: hidden;
}
ul.polaroids a::after {
content: attr(title);
}
ul.polaroids img {
display: block;
margin-bottom: 12px;
width: 190px;
overflow: hidden;

}
/* By default, we tilt all our images -2 degrees */
ul.polaroids a {
-webkit-transform: rotate(-2deg);
-moz-transform: rotate(-2deg);
}

/* Rotate all even images 2 degrees */
ul.polaroids li:nth-child(even) a {
-webkit-transform: rotate(2deg);
-moz-transform: rotate(2deg);
}

/* Don't rotate every fourth image, but offset its position */
ul.polaroids li:nth-child(4n) a {
-webkit-transform: none;
-moz-transform: none;
position: relative;
top: -5px;
}

/* Rotate every fifth image by 5 degrees and offset it */
ul.polaroids li:nth-child(5n) a {
-webkit-transform: rotate(5deg);
-moz-transform: rotate(5deg);
position: relative;
right: 5px;
}

/* Keep default rotate for every eighth, but offset it */
ul.polaroids li:nth-child(8n) a {
position: relative;
top: 8px;
right: 5px;
}

/* Keep default rotate for every eleventh, but offset it */
ul.polaroids li:nth-child(11n) a {
position: relative;
top: 3px;
left: -5px;
}
/* Scale the images on hover, add transitions for smoothing things out, and ensure the hover appears on top */
ul.polaroids li a:hover {
-webkit-transform: scale(1.25);
-moz-transform: scale(1.25);
position: relative;
float: left;

z-index: 5;
}
/* Add drop shadows and smooth out the transition (Safari only) */
ul.polaroids a {
-webkit-transition: -webkit-transform .15s linear;
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.25);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.25);
}

/* On hover, darken the shadows a bit */
ul.polaroids a {
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,.5);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,.5);
}


Be Sociable, Share!

Published by

Chris Malpass

I'm a web developer, photographer, casual gamer, and technophile from Virginia, USA.