0

11.3.11 BarrelRoll

Posted by

On 3rd Nov 2011, google amused people world over by a bit of CSS3 magic. If you haven’t heard about it, try this Google link.

Here is the code which would do that kind of Barrel Roll and more..
Needless to say, use a modern browser(Chrome,Firefox,Opera,IE9,10)
Just the CSS..

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

		.flip-horizontal {
			-moz-transition: -moz-transform 4s ease;
			-moz-transform: scaleX(-1);
			-webkit-transition: -webkit-transform 4s ease;
			-webkit-transform: scaleX(-1);
			-o-transition: -o-transform 4s ease;
			-o-transform: scaleX(-1);
			transition: transform 4s ease;
			transform: scaleX(-1);
			filter: fliph; /*IE*/
		}
		.flip-vertical {
			-moz-transition: -moz-transform 4s ease;
			-moz-transform: scaleY(-1);
			-webkit-transition: -webkit-transform 4s ease;
			-webkit-transform: scaleY(-1);
			-o-transition: -o-transform 4s ease;
			-o-transform: scaleY(-1);
			transition: transform 4s ease;
			transform: scaleY(-1);
			filter: flipv; /*IE*/
		}
		.barell-roll{
			-webkit-transition: -webkit-transform 4s ease;
			-webkit-transform: rotate(360deg);
			-moz-transition: -moz-transform 4s ease;
			-moz-transform: rotate(360deg);
			-o-transition: -o-transform 4s ease;
			-o-transform: rotate(360deg);
			transition: transform 4s ease;
			transform: rotate(360deg);
		}

Full Blown Example

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87

<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title>CSS3 Transforms..Barrel Roll..Flip Horizontal, Vertical</title>
	<style type="text/css">
		.flip-horizontal {
			-moz-transition: -moz-transform 4s ease;
			-moz-transform: scaleX(-1);
			-webkit-transition: -webkit-transform 4s ease;
			-webkit-transform: scaleX(-1);
			-o-transition: -o-transform 4s ease;
			-o-transform: scaleX(-1);
			transition: transform 4s ease;
			transform: scaleX(-1);
			filter: fliph; /*IE*/
		}
		.flip-vertical {
			-moz-transition: -moz-transform 4s ease;
			-moz-transform: scaleY(-1);
			-webkit-transition: -webkit-transform 4s ease;
			-webkit-transform: scaleY(-1);
			-o-transition: -o-transform 4s ease;
			-o-transform: scaleY(-1);
			transition: transform 4s ease;
			transform: scaleY(-1);
			filter: flipv; /*IE*/
		}
		.barell-roll{
			-webkit-transition: -webkit-transform 4s ease;
			-webkit-transform: rotate(360deg);
			-moz-transition: -moz-transform 4s ease;
			-moz-transform: rotate(360deg);
			-o-transition: -o-transform 4s ease;
			-o-transform: rotate(360deg);
			transition: transform 4s ease;
			transform: rotate(360deg);
		}
 
	</style>
	<script type="text/javascript">
		function flipContent(c){
			switch(c){
			case 'h':
				document.getElementById('content').className = 'flip-horizontal';
				break;
			case 'v':
				document.getElementById('content').className = 'flip-vertical';
				break;
			case 'r':
				document.getElementById('content').className = 'barell-roll';
				break;
			}
			//setTimeout(function(){document.getElementById('content').className = '';},5000)
		}
 
	</script>
</head>
<body>
<input type="button" onClick="flipContent('h')" value="FLIPHoriz" />
<input type="button" onClick="flipContent('v')" value="FLIPVertic" />
<input type="button" onClick="flipContent('r')" value="BarellRoll" />
<div id="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed et massa orci. Vestibulum urna sem, euismod sed pharetra at, lobortis ut ante. Duis erat felis, convallis eu sollicitudin eu, imperdiet non felis. Maecenas a metus lacinia nisi auctor sagittis. Donec varius nulla sit amet urna auctor eget posuere sem pulvinar. Aliquam erat volutpat. Etiam malesuada, nulla eu ultrices dictum, ante lacus pulvinar tellus, ut egestas ante odio lobortis neque. Curabitur id enim euismod nibh mollis blandit vel sed neque. Praesent consectetur luctus felis ac fringilla. Nullam ultricies gravida tortor, et luctus augue pulvinar at. Nam et turpis eu elit dignissim tincidunt. Fusce pretium mi a nisl lacinia eget feugiat felis tempus. Etiam feugiat purus non arcu porttitor semper. Vivamus id sem nibh, ac sodales nibh. Ut ultricies feugiat malesuada.
 
Morbi gravida ipsum vitae tellus euismod ultricies. Pellentesque sed diam enim, non imperdiet mauris. Nunc tellus sem, vulputate tincidunt aliquam quis, commodo eu ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nam nec libero lacus, non suscipit elit. Aenean euismod mattis fermentum. Aliquam sed quam lacus, ac malesuada odio. Maecenas commodo fringilla sapien sit amet bibendum. Fusce vehicula massa vel neque sagittis vitae convallis nibh dignissim. Morbi euismod libero vitae nulla rutrum tincidunt. Donec eu condimentum arcu. Nulla enim ante, porttitor sit amet sodales eget, accumsan ut nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras est arcu, cursus et rhoncus et, vehicula eget metus. Curabitur in dui sapien.
 
Fusce convallis, orci vitae pretium accumsan, lorem magna tempus odio, quis tincidunt nisl dolor et diam. Etiam consectetur sollicitudin purus, vitae gravida ipsum scelerisque et. Etiam egestas nisl nec tortor luctus aliquet. Vivamus at metus consequat odio ultrices scelerisque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam luctus, nulla ut molestie pharetra, nunc leo sodales dui, eget pellentesque tortor libero at lorem. Sed elementum neque eu turpis vulputate varius.
 
Aenean nec sagittis sapien. Etiam leo lacus, laoreet sed ultrices eget, egestas ut sapien. Nullam tempor gravida porttitor. Phasellus purus mauris, malesuada ac interdum vitae, hendrerit scelerisque velit. Integer lacinia, mi eget eleifend cursus, turpis orci mattis lectus, a volutpat eros justo id quam. Etiam vitae egestas turpis. Nam blandit eleifend tortor non lacinia. Mauris bibendum justo id massa tincidunt et scelerisque lectus pretium. Quisque molestie eros ut nibh pellentesque aliquet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus at libero id dolor fermentum pellentesque vitae eu nibh. Praesent mollis volutpat malesuada. Vivamus in risus ligula, ac aliquet est. Vivamus ac tincidunt turpis. Aenean commodo massa ut velit sollicitudin scelerisque. Ut eu urna tellus.
 
Donec molestie lacinia lectus vitae feugiat. Fusce malesuada justo vitae lacus dictum ac congue justo rhoncus. Fusce ultricies dui vel magna facilisis consequat. Sed vestibulum dignissim tellus, id ultrices massa varius non. Mauris diam lacus, ultrices vitae sodales quis, auctor vel lorem. Donec dui risus, ultricies id ornare vitae, lacinia et magna. Maecenas eget odio odio, et dictum lorem. Nullam euismod, elit non laoreet vehicula, quam metus suscipit turpis, sed pharetra erat arcu vitae lacus. Nam in sem in dui interdum pellentesque. Nunc ligula augue, sollicitudin vel dignissim at, tincidunt non sem. Sed in sapien elit. Aenean lacinia neque non arcu interdum luctus. Suspendisse potenti. Quisque feugiat, sapien a dapibus suscipit, augue urna tristique libero, vitae iaculis orci ipsum ac nisi.
 
Nullam justo tellus, tempus a accumsan non, suscipit ut purus. Quisque vitae odio ut est feugiat blandit nec at sem. Nunc aliquet porta turpis eu placerat. Aliquam a placerat lectus. Aliquam mattis rhoncus ipsum, quis vestibulum metus tristique id. Sed semper vulputate risus, id blandit eros iaculis vitae. Sed vel ante ac purus suscipit placerat et nec ipsum. Ut bibendum lorem et elit viverra accumsan ut vel dolor. Ut eget aliquet enim. Cras tellus ante, aliquet vitae congue eu, posuere quis justo. In semper ullamcorper lacus, in faucibus felis feugiat ut.
 
Pellentesque arcu elit, gravida ut vulputate in, tincidunt sed dolor. Phasellus pellentesque risus sed erat tempor faucibus. Vivamus iaculis, felis vel mollis lacinia, nisi leo iaculis sapien, a ultrices diam velit ac ligula. Phasellus eu urna nunc. Maecenas vitae eros id quam dictum mollis quis id magna. Fusce eu nulla justo, eu malesuada augue. Phasellus ut fringilla purus. Pellentesque lacus enim, interdum in viverra eget, luctus vitae felis. Praesent vulputate tincidunt enim et lacinia.
 
Pellentesque feugiat erat id lacus gravida ullamcorper fringilla lectus ultrices. Phasellus auctor risus ut lectus rutrum eget interdum metus rutrum. Proin porttitor pretium blandit. Etiam aliquet, sem eget adipiscing ullamcorper, urna urna eleifend quam, eget luctus massa nunc et enim. Duis at libero sed neque rhoncus fermentum quis quis nisi. Donec convallis vehicula massa ut imperdiet. Duis varius accumsan augue nec consectetur. Etiam auctor faucibus ligula, at facilisis metus sodales ac. Aliquam pulvinar bibendum dolor, quis suscipit orci accumsan ut. Vestibulum placerat suscipit sapien in gravida. Proin semper velit id elit accumsan non eleifend nisl dictum. Vivamus vel lacus quis orci condimentum gravida ac et nulla. Duis feugiat tincidunt pellentesque.
 
Quisque lacinia, enim vel aliquam vestibulum, eros arcu aliquam eros, ut adipiscing nisi nulla sit amet mi. Suspendisse lacus neque, malesuada et consequat eu, imperdiet non ligula. Aliquam sed imperdiet sapien. Nunc lacus arcu, lacinia sit amet ornare a, tincidunt id lorem. Mauris vitae nibh metus. Nam ac dolor id tortor consequat sodales non a diam. Nulla rhoncus sapien sed metus commodo nec luctus ipsum luctus.
 
In hac habitasse platea dictumst. Vivamus non nulla enim, ut pellentesque odio. Integer molestie leo vel dui faucibus cursus. Nam turpis mi, vehicula in cursus quis, facilisis nec quam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec adipiscing ullamcorper tellus quis venenatis. Donec ut dictum ante. Integer condimentum lorem bibendum tortor fermentum consequat ullamcorper lacinia erat. Proin blandit ultricies ligula ac egestas. Nam a ligula quis mauris condimentum ultricies. Proin ullamcorper fringilla neque, sit amet pharetra risus vehicula et. Ut a arcu at metus gravida bibendum. Sed pharetra tincidunt leo non feugiat. Pellentesque arcu nulla, gravida non dignissim laoreet, ornare sit amet velit. Nulla rhoncus, mauris vel commodo suscipit, risus ipsum interdum ante, ac porta turpis risus vel justo.
 
Pellentesque egestas commodo enim, sed mattis dui aliquet eget. Donec sit amet velit eget ligula hendrerit pharetra sed sed eros. Nunc gravida orci in tortor ornare rutrum. Morbi id mauris libero. Vivamus sapien nibh, sagittis ut auctor ac, dignissim laoreet enim. Suspendisse sed tempor neque. Ut sapien tortor, eleifend quis tincidunt malesuada, sagittis porttitor quam. Mauris hendrerit lacinia pulvinar. Nulla consequat malesuada diam ac facilisis. Fusce eu urna mi, eu vehicula risus. Quisque tincidunt magna sit amet magna lacinia egestas. Vivamus rhoncus neque dolor.
</div>
</body>
</html>
“If it’s not fun, tell me, why are you still playing?”
~Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>