Skip to content

Instantly share code, notes, and snippets.

@landsurveyorsunited
Created May 31, 2023 19:34
Show Gist options
  • Save landsurveyorsunited/b90973b6766b9a395e0a2730f715e3a2 to your computer and use it in GitHub Desktop.
Save landsurveyorsunited/b90973b6766b9a395e0a2730f715e3a2 to your computer and use it in GitHub Desktop.
Pure CSS 3D Map Banner Pin Icon
<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>
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;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment