CSS3 media queries and transitions
To create the rotating ‘flower’ that I used on my new web design holding site I used some media queries that are all the rage at the moment and transitions so that the flower spins around when the browser is resized.
I have created a simple demo to demonstrate. (Must use a webkit browser)
Mark up the page with normal HTML
<html>
<head>
</head>
<body>
<img src="images/flower.png" alt="flower"/>
</body>
</html>
Then to make the flower spin we use CSS.
body {
background: #E6E7E8 ;
margin: 0;
padding: 0;
position: relative;
}
img[alt=flower] {
display: block;
left: -300px; top: -000px;
position: absolute;
-webkit-transition-duration: 4s, 2s;
}
@media screen and (min-width: 700px)
{
img[alt=flower] {
-webkit-transform: scale(1.00) rotate(450deg) translate(0px, 0px) skew(0deg, 0deg); transform-origin: 50% 50%;
-webkit-transition-duration: 2s, 4s;
}
}
By giving the flower reverse instructions for when the browser goes past the 700 pixel wide threshold the transition is called into play.
css3, media queries, transitions
Comments