Skip to content

Instantly share code, notes, and snippets.

@commak

commak/rotate.html

Last active October 24, 2015 01:31
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save commak/59483c13d1e4d2a40b23 to your computer and use it in GitHub Desktop.
Save commak/59483c13d1e4d2a40b23 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
rotate.html
<!DOCTYPE HTML>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<title> Rotate </title>
</head>
<link rel="stylesheet" href="rotate_style.css">
<style>
</style>
<body>
<div id="stage">
<div class="shape circle"></div>
<div class="shape triangle" class="no-rotate"></div>
<div class="shape square"></div>
<div class="shape pentagon"></div>
<div class="shape hexagon"></div>
</div>
<div id="TextBox"></div>
<script>
$text1 = 'this is my essay 1'; //text
$text2 = 'does this work 2';
$text3 = 'ok 3';
$text4 = 'hello 4';
$text5 = 'goodnight 5'
$(".shape").click(function(){ //any shape
$( this ).toggleClass( "no-rotate" ); //shape is paused when mouse is on
$("#stage").addClass( "shrink"); //the container is shrinked
$("#TextBox").html($text1); // first text is revelead despise which shape is clicked, it will be in order
$(".circle").click(function(){ //always revealing 1st time
$("#TextBox").html($text1);
});
$(".triangle").click(function(){ //2nd text
$("#TextBox").html($text2);
});
$(".square").click(function(){ //3rd
$("#TextBox").html($text3);
});
$(".pentagon").click(function(){ //4th
$("#TextBox").html($text4);
});
$(".hexagon").click(function(){ //5h
$("#TextBox").html($text5);
});
});
</script>
</body>
</html>
Raw
rotate_style.css
@-webkit-keyframes rotate {
100% { -webkit-transform:rotate(360deg); }
}
@-moz-keyframes rotate {
100% { -moz-transform:rotate(360deg); }
}
@-o-keyframes rotate {
100% { -o-transform:rotate(360deg); }
}
@-ms-keyframes rotate {
100% { -ms-transform:rotate(360deg); }
}
@keyframes rotate {
100% { transform:rotate(360deg); }
}
@keyframes counterrotate {
100% { transform:rotate(-360deg); }
}
#circle{
width: 140px;
height: 140px;
border-radius: 70px;
background: #E6007E;
position: absolute;
top:25%;
left:70px;
-webkit-animation-name: rotate;
-moz-animation-name: rotate;
-ms-animation-name: rotate;
-o-animation-name: rotate;
animation-name: rotate;
-webkit-animation-duration: 4s;
-moz-animation-duration: 4s;
-ms-animation-duration: 4s;
-o-animation-duration: 4s;
animation-duration: 4s;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
-o-animation-timing-function: linear;
animation-timing-function: linear;
}
#triangle {
width: 0;
height: 100;
border-left: 80px solid transparent;
border-right: 80px solid transparent;
border-bottom: 160px solid #F39200;
position: absolute;
top:25%;
left:290px;
-webkit-animation-name: rotate;
-moz-animation-name: rotate;
-ms-animation-name: rotate;
-o-animation-name: rotate;
animation-name: rotate;
-webkit-animation-duration: 1.5s;
-moz-animation-duration: 1.5s;
-ms-animation-duration: 1.5s;
-o-animation-duration: 1.5s;
animation-duration: 1.5s;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
-o-animation-timing-function: linear;
animation-timing-function: linear;
}
#square {
width: 140px;
height: 140px;
background: #FFDE00;
position: absolute;
top:25%;
left:530px;
-webkit-animation-name: counterrotate;
-moz-animation-name: counterrotate;
-ms-animation-name: counterrotate;
-o-animation-name: counterrotate;
animation-name: counterrotate;
-webkit-animation-duration: 2s;
-moz-animation-duration: 2s;
-ms-animation-duration: 2s;
-o-animation-duration: 2s;
animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
-o-animation-timing-function: linear;
animation-timing-function: linear;
}
#pentagon{
width: 108px;
border-width: 100px 36px 0;
border-style: solid;
border-color: #91C998 transparent;
position: absolute;
top:37%;
left:758px;
-webkit-animation-name: rotate;
-moz-animation-name: rotate;
-ms-animation-name: rotate;
-o-animation-name: rotate;
animation-name: rotate;
-webkit-animation-duration: 4s;
-moz-animation-duration: 4s;
-ms-animation-duration: 4s;
-o-animation-duration: 4s;
animation-duration: 4s;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
-o-animation-timing-function: linear;
animation-timing-function: linear;
}
#pentagon:before {
content: "";
position: absolute;
height: 0; width: 0;
top: -170px; left: -36px;
border-width: 0 90px 70px;
border-style: solid;
border-color: transparent transparent #91C998;
}
#hexagon{
width: 150px;
height: 82.5px;
background: #009FE3;
position: absolute;
top:38%;
left:1000px;
-webkit-animation-name: counterrotate;
-moz-animation-name: counterrotate;
-ms-animation-name: counterrotate;
-o-animation-name: counterrotate;
animation-name: counterrotate;
-webkit-animation-duration: 2.5s;
-moz-animation-duration: 2.5s;
-ms-animation-duration: 2.5s;
-o-animation-duration: 2.5s;
animation-duration: 2.5s;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
-ms-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-timing-function: linear;
-ms-animation-timing-function: linear;
-o-animation-timing-function: linear;
animation-timing-function: linear;
}
#hexagon:before {
content: "";
position: absolute;
top: -37.5px;
left: 0;
width: 0;
height: 0;
border-left: 75px solid transparent;
border-right: 75px solid transparent;
border-bottom: 38.5px solid #009FE3;
}
#hexagon:after {
content: "";
position: absolute;
bottom: -37.5px;
left: 0;
width: 0;
height: 0;
border-left: 75px solid transparent;
border-right: 75px solid transparent;
border-top: 38.5px solid #009FE3;
}
#stage {
outline:1px #ccc ;
background: white;
position:absolute;
top:200px;
height:250px;
transition:all 0.5s;
transform-origin: 50% 0%; /* Chrome, Safari, Opera */
-webkit-transform-origin: 50% 0%; /* Chrome, Safari, Opera */
}
#stage.shrink{
position:static;
top:0px;
transform: scale(0.3); /* Standard syntax */
}
.shape:hover {
-webkit-animation-play-state: paused; /* Chrome, Safari, Opera */
animation-play-state: paused;
}
.no-rotate{
-webkit-animation-play-state: paused; /* Chrome, Safari, Opera */
animation-play-state: paused;
}
.no-rotate:hover {
-webkit-animation-play-state: running; /* Chrome, Safari, Opera */
animation-play-state: running;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment