Skip to content

Instantly share code, notes, and snippets.

@makzan
Created Nov 6, 2011
Embed
What would you like to do?
Rotatable radar in HTML and CSS
html, body{
background: transparent;
}
ul,li{
margin:0;
list-style:none;
}
li {
width: 3px;
height: 3px;
background: #000;
position: absolute;
}
#radar {
position: absolute;
width: 100px;
height: 100px;
left: 100px;
top: 100px;
-webkit-transform-origin: 0 0;
-webkit-transform:scale(.7);
}
#radar-background{
width: 100%;
height: 100%;
background: rgba(100,100,244,0.3);
border-radius:200px;
position: relative;
margin-left: -50px;
margin-top: -50px;
}
#radar-indicator{
width: 2px;
height: 50%;
background: rgba(30,30,255,0.2);
position: absolute;
left: 0;
top: -50%;
}
#radar-dots {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
-webkit-transform-origin: 0 0;
}
#template{
display:none;
}
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='utf-8'>
<title>StreetView radar</title>
<meta name='description' content=''>
<meta name='author' content=''>
<link rel="stylesheet" type="text/css" media="all" href="radar.css">
</head>
<body>
<div id='radar'>
<div id='radar-background'></div>
<div id='radar-indicator'></div>
<ul id='radar-dots'>
</ul>
</div>
<div id='template'>
<li id='dot-template' class='dot'></li>
</div>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
function rotate(deg) {
$("#radar-dots").css('-webkit-transform','rotate('+deg+'deg)');
}
function add_dot(x, y) {
var new_dot = $('#dot-template').clone();
$("#radar-dots").append(new_dot);
new_dot.css({'left':x+'px', 'top':-y+'px'});
}
//usage
//add_dot(10,10);
//add_dot(-30,100);
// rotate(30); //deg
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment