HTML5/CSS3 3D Radar Scanning Animation

HTML5/CSS3 3D Radar Scanning Animation: BY Steven12 Jan,2021; Tags:
HTML5 Animation Radar

Introduction

This time we share another radar animation is more shocking, it is based on HTML5 and CSS3 implementation, its main feature is the 3D stereoscopic visual effect, the mouse click on the radar will show a 3D stereoscopic map, and the map specified several locations for coordinate details description.

Instructions

HTML Body Code

radarContainer.innerHTML = '<div class="radar-map-container">\
                                    <div class="radar-map"></div>\
                                </div>\
                                <div class="changing-number-container" data-number="1234567890456"></div>\
                                <div class="risk-points"></div>\
                                <div class="scanning-circle">\
                                    <div class="radar-scanner">\
                                        <div class="inner-scanner"></div>\
                                        <div class="outer-scanner">\
                                            <div class="scanner-container">\
                                                <div class="umbrella"></div>\
                                                <div class="scanner-decoration">\
                                                    <div class="thin-border"></div>\
                                                    <div class="small-ellipse"></div>\
                                                    <div class="small-ellipse"></div>\
                                                    <div class="small-ellipse"></div>\
                                                </div>\
                                            </div>\
                                        </div>\
                                    </div>\
                                </div>';
    
    this._container = radarContainer;
    this._containerWidth = this._container.offsetWidth;
    this._containerHeight = this._container.offsetHeight;
    this._centerX = this._containerWidth / 2;
    this._centerY = this._containerHeight / 2;

Css Code

.radar {
  height: 40em;
  width: 48em;
  position: relative;
  cursor: pointer;
  -webkit-perspective: 62.5em;
          perspective: 62.5em;
}
.radar .radar-map-container,
.radar .risk-points,
.radar .scanning-circle canvas {
  left: 0;
  top: 0;
  position: absolute;
}
.radar .radar-map-container,
.radar .radar-map,
.radar .scanning-circle,
.radar .risk-elements-group {
  -webkit-transition: opacity 2.5s ease-out, -webkit-transform 2.5s ease-out, -webkit-transform-origin;
  transition: opacity 2.5s ease-out, -webkit-transform 2.5s ease-out, -webkit-transform-origin;
  transition: transform 2.5s ease-out, opacity 2.5s ease-out, transform-origin;
  transition: transform 2.5s ease-out, opacity 2.5s ease-out, transform-origin, -webkit-transform 2.5s ease-out, -webkit-transform-origin;
}
.radar .radar-map-container,
.radar .radar-map,
.radar .scanning-circle {
  will-change: transform;
}

VIEW NOW