Skip to content

Instantly share code, notes, and snippets.

Created Nov 6, 2011
What would you like to do?
Rotatable radar in HTML and CSS
html, body{
background: transparent;
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;
width: 100%;
height: 100%;
background: rgba(100,100,244,0.3);
position: relative;
margin-left: -50px;
margin-top: -50px;
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;
<!DOCTYPE html>
<html lang='en'>
<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">
<div id='radar'>
<div id='radar-background'></div>
<div id='radar-indicator'></div>
<ul id='radar-dots'>
<div id='template'>
<li id='dot-template' class='dot'></li>
<script src=""></script>
function rotate(deg) {
function add_dot(x, y) {
var new_dot = $('#dot-template').clone();
new_dot.css({'left':x+'px', 'top':-y+'px'});
// rotate(30); //deg
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment