Pure CSS 3D Map Banner Pin Icon

index.html

<link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
  
<link href='https://fonts.googleapis.com/css?family=Raleway:400,100,700,300' rel='stylesheet' type='text/css'>

<div id="map-locator">
  <div class="container clearfix">
    <div class="one_half">
      <h3>For Emergency </h3><br>
      <p>Roofing Services</p>
     <a href="sms://+17274253747?body=I%27m%20interested%20in%20your%20product.%20Please%20contact%20me." class="btn btn-primary m-3">Send SMS message</a>
    </div>
    <div class="one_half map-container" ontouchstart="this.classList.toggle('hover');">
      <div class="map-flip">
        <div class="front map-icon"><i class="fa fa-map-marker"></i></div>
        <div class="back map-icon"><i class="fa fa-map-marker"></i></div>
      </div>
      <img src="https://storage.ning.com/topology/rest/1.0/file/get/11129814452?profile=original">
    </div>
  </div>
</div>

pure-css-3d-map-banner-pin-icon.markdown

Pure CSS 3D Map Banner Pin Icon

Here is a pure CSS banner for something such as a 'branch locator' with a little 3D animation of the location pin when hoverd.

Forked from Kieran's Pen Pure CSS 3D Map Banner Pin Icon.

A Pen by JFarrow on CodePen.

License.

style.css

body {
  margin:0;
  padding:0;
}
h1 {
  font-family:Raleway, sans-serif;
  font-weight:normal;
}
p {
  font-family:sans-serif;
  color:#777;
  font-size:14px;
}
.clearfix:after {
  content:'';
  clear: both;
  display:block;
}
.container {
  display: block;
  max-width:1000px;
  margin:0 auto;
}
#map-locator {
  width:100%;
  background:transparent;
  margin:60px 0;
}
#map-locator button:hover {
	background:#8d4a6d;
  cursor:pointer;
}
#map-locator button {
  background: #c43f3f;
  color:#fff;
  border:0;
  border-radius: 0;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 1px;
  margin-bottom:20px;
  padding:18px 15px;
}
#map-locator h1 {
	color:#999;
	line-height:0.5;
	padding-top:25px;
	text-transform: uppercase;
}
#map-locator img {
	height: 200px;
	z-index: 0;
}
.map-container {
	position: relative;
	perspective: 1000;
	-webkit-perspective: 1000;
	margin-bottom:0 !important;
}
#map-locator:hover .map-flip, 
#map-locator.hover .map-flip {
  transform: rotateY(180deg);
  -webkit-transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg); 
}

.map-flip {
	transition: 0.6s;
  -webkit-transition: 0.6s;
  -moz-transform: 0.6s;
  -o-transform: 0.6s; 
	transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
	position: absolute;
	display: inline-block;
	top:85px;
	left:245px;
	text-align: center;
	z-index:1;
	width:50px;
}
.front.map-icon, 
.back.map-icon {
  backface-visibility: hidden;
  -webkit-backface-visibility:hidden;
  -moz-backface-visibility: preserve-3d;
  -o-backface-visibility: preserve-3d;
	position: absolute;

}
.front.map-icon {
	position: absolute;
	z-index: 9999;
	width:50px;
	height:40px;
}
.back.map-icon {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
  -moz-transform: rotateY(180deg);
  -o-transform: rotateY(180deg); 
	width:50px;
	height:40px;
}
.front.map-icon i {
	color:#c43f3f;
}

.back.map-icon i {
	color: #8d4a6d;
}
.front.map-icon i, 
.back.map-icon i {
	font-size:56px;
	top:0;
	left:9px;
	position: absolute;
}
.one_half {
  width:50%;
  float:left;
  margin:0;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />