kaajavi/rosa_de_los_vientos.html

## rosa_de_los_vientos.html
<!-- Author : Rafael Lima -->
<html lang="pt-BR">
  <head>
    <meta charset="utf-8" />
    <title>
Rosa de los vientos    </title>

    <style>

@import url('http://fonts.googleapis.com/css?family=Raleway:400,200,300,500,600,700');

body {
  font: 17px 'Raleway Light', sans-serif;
  background: rgba(200,200,200,.3);
  color: #888;
  text-align: center;
}

.compass {
  width: 200px;
  height: 200px;
  position: relative;
  margin: 150px auto;
  margin-bottom: 50px;
  background: linear-gradient(#DDD, #CCC 20%, #DDD);
  border-radius: 50%;
  box-shadow: 0 2px 6px .8px #999;
  animation: sliding 1.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  -webkit-animation: sliding 1.9s ease-in-out;
}

.compass:after {
  content: "";
  width: 20px;
  height: 20px;
  position: absolute;
  top: -26px;
  left: 50%;
  margin-left: -16px;
  border: 6px solid #DDD;
  border-radius: 50%;
}

.compass-main {
  width: 94%;
  height: 94%;
  position: absolute;
  top: 50%; left: 50%;
  margin-top: -47%; margin-left: -47%;
  background: radial-gradient(#EEE 50%, #DDD 80%);
  border-radius: 50%;
}

.compass-rose {
  width: 70%;
  height: 70%;
  position: absolute;
  top: 50%; left: 50%;
  margin-top: -35%; margin-left: -35%;
}

.pointer {
  width: 0; height: 0;
  position: absolute;
  border: 80px solid;
  border-left: 14px solid; border-right: 14px solid;
}

.cardial-points .pointer {
  border-color: #DDD transparent transparent transparent;
}

.ordinal-points .pointer {
  border-color: #AAA transparent transparent transparent;
}

.north-pointer {
  top: -40px; margin-top: -40px;
  left: 50%; margin-left: -14px;
  -webkit-transform: rotate(180deg);
}

.east-pointer {
  top: 28%; right: -10px;
  margin-top: -50px;
  -webkit-transform: rotate(-90deg);
}

.west-pointer {
  top: 28%; left: -10px;
  margin-top: -50px;
  -webkit-transform: rotate(90deg);
}

.south-pointer {
  bottom: -40px; margin-bottom: -40px;
  left: 50%; margin-left: -14px;
}


.bt-center {
  width: 16px;
  height: 16px;
  position: absolute;
  z-index: 100000;
  top: 50%; left: 50%;
  margin-top: -8px; margin-left: -8px;
  display: block;
  background: #444;
  border-radius: 50%;
}

.dip-needle {
  width: 12px;
  height: 12px;
  position: absolute;
  z-index: 999;
  top: 50%; left: 50%;
  margin-top: -6px;
  margin-left: -6px;
  transform: rotate(90deg);
  transition-duration:0.1s;
  /*-webkit-animation: animation-dip-needle 1s linear 0s infinite;*/
}

.dip-needle:after {
  content: "";
  width: 0; height: 0;
  position: absolute;
  top: -138px; right: -54px;
  border: 80px solid;
  border-left: 6px solid; border-right: 6px solid;
  border-color: #B20000 transparent transparent transparent;
  -webkit-transform: rotate(220deg);
  z-index: -10000;
}

.dip-needle:before {
  content: "";
  display: block;
  width: 0; height: 0;
  position: absolute;
  top: -10px; right: 54px;
  border: 80px solid;
  border-left: 6px solid; border-right: 6px solid;
  border-color: #CCC transparent transparent transparent;
  -webkit-transform: rotate(40deg);
}

.north-label {
  position: absolute;
  top: 5%; left: 47%;
}

.east-label {
  position: absolute;
  top: 47%; right: 5%;
}

.west-label {
  position: absolute;
  top: 47%; left: 5%;
}

.south-label {
  position: absolute;
  bottom: 5%; left: 47%;
}


/*
@keyframes "animation-dip-needle" {
  0% { transform: rotate(-70deg); }
  30% { transform: rotate(-30deg); }
  50% { transform: rotate(-40deg); }
  70% { transform: rotate(-20deg); }
  100% { transform: rotate(-70deg); }
}

@keyframes "fadeIn" {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes "sliding" {
  0% { transform: translateY(-800px); opacity:0; }
  70%{ opacity:0.4; }
  80% { transform: translateY(48px); opacity:0.6; }
  100% { transform: translateY(0); opacity:1; }
}
*/
</style>
  </head>
  <body>
    <!-- Bússola | Compass -->
    <div class="compass">
      <div class="compass-main">
        <!--  Rótulos | Labels -->
        <span class="north-label">N</span>
        <span class="east-label">E</span>
        <span class="west-label">W</span>
        <span class="south-label">S</span>
        <!-- Rosa dos Ventos | Compass Rose -->
        <div class="compass-rose">
          <!-- Pontos Cardiais | Cardial Points -->
          <div class="cardial-points">
            <div class="north-pointer pointer"></div>
            <div class="east-pointer pointer"></div>
            <div class="west-pointer pointer"></div>
            <div class="south-pointer pointer"></div>
          </div>
          <!-- Pontos Ordinais | Ordinal Points -->
          <div class="ordinal-points">
            <div class="northeast-pointer"></div>
            <div class="northwest-pointer"></div>
            <div class="southeast-pointer"></div>
            <div class="south-west-pointer"></div>
          </div>
        </div>
        <!-- Bt Center -->
        <div class="bt-center"></div>
        <!-- Agulha Magnética | Dip Needle -->
        <div class="dip-needle"></div>
      </div>
    </div>
  </body>

<script
src="http://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>
<script>
var degrees = 0;
function change_dir(){
	console.log(degrees);
	$(".dip-needle").css({
  '-webkit-transform' : 'rotate('+degrees+'deg)',
     '-moz-transform' : 'rotate('+degrees+'deg)',
      '-ms-transform' : 'rotate('+degrees+'deg)',
       '-o-transform' : 'rotate('+degrees+'deg)',
          'transform' : 'rotate('+degrees+'deg)',
               'zoom' : 1

    });
	degrees+=20;
}
setInterval(change_dir,1000);
</script>

</html>
	<!-- Author : Rafael Lima -->
	<html lang="pt-BR">
	<head>
	<meta charset="utf-8" />
	<title>
	Rosa de los vientos </title>

	<style>

	@import url('http://fonts.googleapis.com/css?family=Raleway:400,200,300,500,600,700');

	body {
	font: 17px 'Raleway Light', sans-serif;
	background: rgba(200,200,200,.3);
	color: #888;
	text-align: center;
	}

	.compass {
	width: 200px;
	height: 200px;
	position: relative;
	margin: 150px auto;
	margin-bottom: 50px;
	background: linear-gradient(#DDD, #CCC 20%, #DDD);
	border-radius: 50%;
	box-shadow: 0 2px 6px .8px #999;
	animation: sliding 1.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	-webkit-animation: sliding 1.9s ease-in-out;
	}

	.compass:after {
	content: "";
	width: 20px;
	height: 20px;
	position: absolute;
	top: -26px;
	left: 50%;
	margin-left: -16px;
	border: 6px solid #DDD;
	border-radius: 50%;
	}

	.compass-main {
	width: 94%;
	height: 94%;
	position: absolute;
	top: 50%; left: 50%;
	margin-top: -47%; margin-left: -47%;
	background: radial-gradient(#EEE 50%, #DDD 80%);
	border-radius: 50%;
	}

	.compass-rose {
	width: 70%;
	height: 70%;
	position: absolute;
	top: 50%; left: 50%;
	margin-top: -35%; margin-left: -35%;
	}

	.pointer {
	width: 0; height: 0;
	position: absolute;
	border: 80px solid;
	border-left: 14px solid; border-right: 14px solid;
	}

	.cardial-points .pointer {
	border-color: #DDD transparent transparent transparent;
	}

	.ordinal-points .pointer {
	border-color: #AAA transparent transparent transparent;
	}

	.north-pointer {
	top: -40px; margin-top: -40px;
	left: 50%; margin-left: -14px;
	-webkit-transform: rotate(180deg);
	}

	.east-pointer {
	top: 28%; right: -10px;
	margin-top: -50px;
	-webkit-transform: rotate(-90deg);
	}

	.west-pointer {
	top: 28%; left: -10px;
	margin-top: -50px;
	-webkit-transform: rotate(90deg);
	}

	.south-pointer {
	bottom: -40px; margin-bottom: -40px;
	left: 50%; margin-left: -14px;
	}



	.bt-center {
	width: 16px;
	height: 16px;
	position: absolute;
	z-index: 100000;
	top: 50%; left: 50%;
	margin-top: -8px; margin-left: -8px;
	display: block;
	background: #444;
	border-radius: 50%;
	}

	.dip-needle {
	width: 12px;
	height: 12px;
	position: absolute;
	z-index: 999;
	top: 50%; left: 50%;
	margin-top: -6px;
	margin-left: -6px;
	transform: rotate(90deg);
	transition-duration:0.1s;
	/-webkit-animation: animation-dip-needle 1s linear 0s infinite;/
	}

	.dip-needle:after {
	content: "";
	width: 0; height: 0;
	position: absolute;
	top: -138px; right: -54px;
	border: 80px solid;
	border-left: 6px solid; border-right: 6px solid;
	border-color: #B20000 transparent transparent transparent;
	-webkit-transform: rotate(220deg);
	z-index: -10000;
	}

	.dip-needle:before {
	content: "";
	display: block;
	width: 0; height: 0;
	position: absolute;
	top: -10px; right: 54px;
	border: 80px solid;
	border-left: 6px solid; border-right: 6px solid;
	border-color: #CCC transparent transparent transparent;
	-webkit-transform: rotate(40deg);
	}

	.north-label {
	position: absolute;
	top: 5%; left: 47%;
	}

	.east-label {
	position: absolute;
	top: 47%; right: 5%;
	}

	.west-label {
	position: absolute;
	top: 47%; left: 5%;
	}

	.south-label {
	position: absolute;
	bottom: 5%; left: 47%;
	}


	/*
	@keyframes "animation-dip-needle" {
	0% { transform: rotate(-70deg); }
	30% { transform: rotate(-30deg); }
	50% { transform: rotate(-40deg); }
	70% { transform: rotate(-20deg); }
	100% { transform: rotate(-70deg); }
	}

	@keyframes "fadeIn" {
	from {
	opacity: 0;
	}
	to {
	opacity: 1;
	}
	}

	@keyframes "sliding" {
	0% { transform: translateY(-800px); opacity:0; }
	70%{ opacity:0.4; }
	80% { transform: translateY(48px); opacity:0.6; }
	100% { transform: translateY(0); opacity:1; }
	}
	*/
	</style>
	</head>
	<body>
	<!-- Bússola \| Compass -->
	<div class="compass">
	<div class="compass-main">
	<!-- Rótulos \| Labels -->
	<span class="north-label">N</span>
	<span class="east-label">E</span>
	<span class="west-label">W</span>
	<span class="south-label">S</span>
	<!-- Rosa dos Ventos \| Compass Rose -->
	<div class="compass-rose">
	<!-- Pontos Cardiais \| Cardial Points -->
	<div class="cardial-points">
	<div class="north-pointer pointer"></div>
	<div class="east-pointer pointer"></div>
	<div class="west-pointer pointer"></div>
	<div class="south-pointer pointer"></div>
	</div>
	<!-- Pontos Ordinais \| Ordinal Points -->
	<div class="ordinal-points">
	<div class="northeast-pointer"></div>
	<div class="northwest-pointer"></div>
	<div class="southeast-pointer"></div>
	<div class="south-west-pointer"></div>
	</div>
	</div>
	<!-- Bt Center -->
	<div class="bt-center"></div>
	<!-- Agulha Magnética \| Dip Needle -->
	<div class="dip-needle"></div>
	</div>
	</div>
	</body>

	<script
	src="http://code.jquery.com/jquery-2.2.4.min.js"
	integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
	crossorigin="anonymous"></script>
	<script>
	var degrees = 0;
	function change_dir(){
	console.log(degrees);
	$(".dip-needle").css({
	'-webkit-transform' : 'rotate('+degrees+'deg)',
	'-moz-transform' : 'rotate('+degrees+'deg)',
	'-ms-transform' : 'rotate('+degrees+'deg)',
	'-o-transform' : 'rotate('+degrees+'deg)',
	'transform' : 'rotate('+degrees+'deg)',
	'zoom' : 1

	});
	degrees+=20;
	}
	setInterval(change_dir,1000);
	</script>

	</html>