Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="vertical-container">
	
	<div class="container-inner">


							 <div class="container-card">
								<div class="flip-card">
									<div class="masking-fauna">

										  <div class="flip-card-front">

												<svg version="1.1" id="fauna" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
												viewBox="0 0 400 400"></svg>

										  </div>

										  <div class="flip-card-back">

												<svg version="1.1" id="fauna-text" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
												viewBox="0 0 400 400"></svg>							

										  </div>
									</div>	
								</div>
							 </div>
			
			
	</div>
	
</div>	
              
            
!

CSS

              
                @charset "utf-8";
/* CSS Document */

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	height: 100vh;
	background: url("https://images.unsplash.com/photo-1598616891258-3ab6071f82c6?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ") no-repeat fixed;
	background-size: cover;
}


/*--- FLEXBOX ---*/

.vertical-container {
  display: flex;
  justify-content: center;
  align-content: center;
  height: 100vh;
  margin: 0 auto;
}

.container-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  width: 60%;
}

/*--- FINE FLEXBOX ---*/

.container-card {
  perspective: 800px;
	background: url("https://images.unsplash.com/photo-1598616891258-3ab6071f82c6?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ") no-repeat fixed;
	background-size: cover;
}

.flip-card {
	width: 15vw;
	height: 15vw;
	background: inherit;
	position: relative;
	overflow: hidden;
	margin: 0.3em;
	transition: transform .5s;
}

.flip-card:before{
	width: 20vw;
	height: 20vw;
	content: "";
	position: absolute;
	top: -25px;
	left: -25px;
	bottom: 0;
	right: 0;
	background: inherit;
	box-shadow: inset 0 0 0 200px rgba(255,255,255,0.3);
	filter: blur(20px);
}

.container-card:hover .flip-card {
  transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
	position: relative;
	width: 100%;
	height: 100%;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}

.flip-card-front:before, .flip-card-back:before {
	position: absolute;
	width: 100%;
	height: 100%;
	-webkit-backface-visibility: hidden; /* Safari */
	backface-visibility: hidden;
}


.flip-card-front {
	background-color: transparent;

}

.flip-card-back {
  	transform: rotateY(180deg);
	background-color: transparent;

}



/* MASKING THE ITEMS */

.masking-fauna {

    background: inherit;
    -webkit-background: inherit;
    mask-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI0LjIuMywgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9ImZhdW5hIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB2aWV3Qm94PSIwIDAgNDAwIDQwMCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDAwIDQwMDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPgoJLnN0MHtmaWxsOm5vbmU7fQo8L3N0eWxlPgo8ZyBpZD0iX3gzNV81NzViNzMzLTQ1OGMtNDVjZi05NTViLTJiYmNmYTBhNjcxYyI+Cgk8cGF0aCBkPSJNMzQwLjEsMzU1LjRjLTQuMywzLjItMTAsMy43LTE0LjgsMS4yYy02LjItMy4zLTExLjEtMTIuMy0xMS4xLTEyLjNzLTE0LTE0LTE2LjQtMTcuMmMtMi41LTMuMy0xMS4xLTE0LjQtMTIuMy0xOC4xCgkJYy0xLjEtMi45LTIuNS01LjYtNC4xLTguMmwtNi4yLTYuMmMwLDAsMC44LTQuOS0yLjktN3MtMTQuNC03LTIyLjItMTAuM3MtMTYuNC05LTIwLjEtMTMuMmMtMi43LTMuMy01LjEtNi45LTctMTAuN2wtMi4xLTMuNwoJCWMtMy4zLTAuNS02LjUtMS40LTkuNC0yLjljLTMuNy0xLjgtNy4zLTMuOC0xMC43LTYuMmMwLDAtMjIuNi0xLjMtMjcuOSwwYy01LjMsMS4yLTcuNCwyLjktMTMuNiwxLjJjLTYuMi0xLjYtMTQtNS4zLTE3LjMtNS44CgkJYy0zLTAuMi02LTAuMi05LDBjLTIuMSwwLTE3LjMtMC44LTIyLjItMi4xYy00LjktMS4yLTEwLjMtMi4xLTExLjktMS4yYy0xLjcsMC44LTIuNSwyLjUtMC44LDMuM3MxMC4zLDcsMTQsOC42czE5LjgsOC42LDE5LjgsOC42CgkJbDguMiwxLjZjMCwwLDYuNiw3LjgsNywxMC43czEuMiw2LjIsMS4yLDYuMnMzLjMsMS43LDEuNiwzLjNzLTguMiwxLjItMTQtMi45Yy01LjgtNC4xLTktNy44LTEwLjctNy44cy02LjYtMS42LTEyLjctNC45CgkJYy02LjItMy4zLTE2LjktMTAuNy0yMS44LTEyLjNzLTE0LTcuNC0xNy43LTkuNWMtMy43LTIuMS0xOC44LTkuNC0xMS45LTE2LjljMy4xLTMuNCw3LjgtNC45LDEyLjMtNC4xYzAsMCwyMy44LTIsMjYuMy0yCgkJYzIuNSwwLDEyLjcsMC40LDEzLjYtMi45YzAuOC0zLjMtNi42LTE1LjItNS40LTIxLjRjMS4yLTYuMiwyLjEtOC4yLDEuNy0xMS45cy0yLjUtOC4yLTQuMS0xMS41Yy0xLjctMy4zLDAtOC42LTAuOC0xMS45CgkJYy0wLjgtMy4zLTIuMy01LjEtMy4zLTguMmMtMS42LTUuMy0wLjQtMTQuNC0wLjQtMTQuNGwtMjIuMi05LjlsLTE2LjUtNS4ybDAuOC03LjljMCwwLDExLjEtMSwxNC4zLTIuNgoJCWMzLjItMS42LDEzLjMtNy45LDE3LjUtMTEuOWM0LjEtNCwxNC41LTIwLjcsMTQuNS0yMC43VjU5LjRsMy4yLTRjMCwwLDEuMiw5LDIuOSw5YzEuNiwwLDEyLjctNC45LDE1LjItNS44czMuMy03LjQsMy4zLTcuNAoJCWw4LjItOS40YzAsMCwwLjQsNC41LTAuNCw2LjJjLTAuOCwxLjctMy4zLDkuOS0wLjgsMTEuNWMyLjUsMS42LDYuMiwzLjcsNi4yLDMuN3YyLjVoLTE0LjRjMCwwLTguNiwyLjEtMTAuNyw0LjEKCQljLTIsMi01LjgsOC4yLTcuNCwxMi43cy00LjUsOS40LTAuNCwxMC43YzMuOCwxLDcuOCwwLjgsMTEuNS0wLjRjMi4xLTAuOCw2LjYtMi45LDYuNi0yLjlsMC44LDJjMCwwLTIuOSwzLjctNS4zLDYuMgoJCWMtMi41LDIuNS04LjIsNC41LTguMiw0LjVjLTAuOSwyLjQtMC41LDUuMSwxLjIsN2MyLjksMy43LDcuNCwxNi44LDguNiwyMS44YzIuOSwxMy41LDkuOCwyNS44LDE5LjcsMzUuNAoJCWMxNS4yLDE0LjgsMzIuMSwyMy44LDM1LDI0LjNjMi45LDAuNCwxNS42LDMuNywxNy43LDMuM2M4LTEuNiwxNi4zLTEuNCwyNC4zLDAuNGMxMS41LDIuOSwyMi4yLDkuNSwyNy4xLDEzLjIKCQljNC45LDMuNywxMS4xLDEwLjMsMTIuNywxMi43YzEuNywyLjUsMi45LDQuNSwxLjcsN3MtMi41LDUuOC0yLjUsNS44czAuNCw4LjYsMi41LDEyLjdjMiw0LjEsNC4xLDE3LjcsNC4xLDE3LjdsMTUuNiw5CgkJYzIuOSwyLjQsNC44LDUuNyw1LjQsOS41YzAuNSw1LjIsMC42LDEwLjQsMC40LDE1LjZjMCwwLDEwLjMsMTQuNCwxNC44LDIwLjVjNC41LDYuMiw3LDEwLjcsMTAuMywxMi43YzIuMSwxLjMsMy45LDMsNS4zLDQuOQoJCWMwLDAsNC4xLTAuNCw1LjgsMmMxLjYsMi41LDIuNSw5LjUsNS43LDExLjVTMzQyLjYsMzUzLjQsMzQwLjEsMzU1LjR6Ii8+CjwvZz4KPHJlY3QgY2xhc3M9InN0MCIgd2lkdGg9IjQwMCIgaGVpZ2h0PSI0MDAiLz4KPC9zdmc+Cg==');
    -webkit-mask-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI0LjIuMywgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9ImZhdW5hIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB2aWV3Qm94PSIwIDAgNDAwIDQwMCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDAwIDQwMDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPgoJLnN0MHtmaWxsOm5vbmU7fQo8L3N0eWxlPgo8ZyBpZD0iX3gzNV81NzViNzMzLTQ1OGMtNDVjZi05NTViLTJiYmNmYTBhNjcxYyI+Cgk8cGF0aCBkPSJNMzQwLjEsMzU1LjRjLTQuMywzLjItMTAsMy43LTE0LjgsMS4yYy02LjItMy4zLTExLjEtMTIuMy0xMS4xLTEyLjNzLTE0LTE0LTE2LjQtMTcuMmMtMi41LTMuMy0xMS4xLTE0LjQtMTIuMy0xOC4xCgkJYy0xLjEtMi45LTIuNS01LjYtNC4xLTguMmwtNi4yLTYuMmMwLDAsMC44LTQuOS0yLjktN3MtMTQuNC03LTIyLjItMTAuM3MtMTYuNC05LTIwLjEtMTMuMmMtMi43LTMuMy01LjEtNi45LTctMTAuN2wtMi4xLTMuNwoJCWMtMy4zLTAuNS02LjUtMS40LTkuNC0yLjljLTMuNy0xLjgtNy4zLTMuOC0xMC43LTYuMmMwLDAtMjIuNi0xLjMtMjcuOSwwYy01LjMsMS4yLTcuNCwyLjktMTMuNiwxLjJjLTYuMi0xLjYtMTQtNS4zLTE3LjMtNS44CgkJYy0zLTAuMi02LTAuMi05LDBjLTIuMSwwLTE3LjMtMC44LTIyLjItMi4xYy00LjktMS4yLTEwLjMtMi4xLTExLjktMS4yYy0xLjcsMC44LTIuNSwyLjUtMC44LDMuM3MxMC4zLDcsMTQsOC42czE5LjgsOC42LDE5LjgsOC42CgkJbDguMiwxLjZjMCwwLDYuNiw3LjgsNywxMC43czEuMiw2LjIsMS4yLDYuMnMzLjMsMS43LDEuNiwzLjNzLTguMiwxLjItMTQtMi45Yy01LjgtNC4xLTktNy44LTEwLjctNy44cy02LjYtMS42LTEyLjctNC45CgkJYy02LjItMy4zLTE2LjktMTAuNy0yMS44LTEyLjNzLTE0LTcuNC0xNy43LTkuNWMtMy43LTIuMS0xOC44LTkuNC0xMS45LTE2LjljMy4xLTMuNCw3LjgtNC45LDEyLjMtNC4xYzAsMCwyMy44LTIsMjYuMy0yCgkJYzIuNSwwLDEyLjcsMC40LDEzLjYtMi45YzAuOC0zLjMtNi42LTE1LjItNS40LTIxLjRjMS4yLTYuMiwyLjEtOC4yLDEuNy0xMS45cy0yLjUtOC4yLTQuMS0xMS41Yy0xLjctMy4zLDAtOC42LTAuOC0xMS45CgkJYy0wLjgtMy4zLTIuMy01LjEtMy4zLTguMmMtMS42LTUuMy0wLjQtMTQuNC0wLjQtMTQuNGwtMjIuMi05LjlsLTE2LjUtNS4ybDAuOC03LjljMCwwLDExLjEtMSwxNC4zLTIuNgoJCWMzLjItMS42LDEzLjMtNy45LDE3LjUtMTEuOWM0LjEtNCwxNC41LTIwLjcsMTQuNS0yMC43VjU5LjRsMy4yLTRjMCwwLDEuMiw5LDIuOSw5YzEuNiwwLDEyLjctNC45LDE1LjItNS44czMuMy03LjQsMy4zLTcuNAoJCWw4LjItOS40YzAsMCwwLjQsNC41LTAuNCw2LjJjLTAuOCwxLjctMy4zLDkuOS0wLjgsMTEuNWMyLjUsMS42LDYuMiwzLjcsNi4yLDMuN3YyLjVoLTE0LjRjMCwwLTguNiwyLjEtMTAuNyw0LjEKCQljLTIsMi01LjgsOC4yLTcuNCwxMi43cy00LjUsOS40LTAuNCwxMC43YzMuOCwxLDcuOCwwLjgsMTEuNS0wLjRjMi4xLTAuOCw2LjYtMi45LDYuNi0yLjlsMC44LDJjMCwwLTIuOSwzLjctNS4zLDYuMgoJCWMtMi41LDIuNS04LjIsNC41LTguMiw0LjVjLTAuOSwyLjQtMC41LDUuMSwxLjIsN2MyLjksMy43LDcuNCwxNi44LDguNiwyMS44YzIuOSwxMy41LDkuOCwyNS44LDE5LjcsMzUuNAoJCWMxNS4yLDE0LjgsMzIuMSwyMy44LDM1LDI0LjNjMi45LDAuNCwxNS42LDMuNywxNy43LDMuM2M4LTEuNiwxNi4zLTEuNCwyNC4zLDAuNGMxMS41LDIuOSwyMi4yLDkuNSwyNy4xLDEzLjIKCQljNC45LDMuNywxMS4xLDEwLjMsMTIuNywxMi43YzEuNywyLjUsMi45LDQuNSwxLjcsN3MtMi41LDUuOC0yLjUsNS44czAuNCw4LjYsMi41LDEyLjdjMiw0LjEsNC4xLDE3LjcsNC4xLDE3LjdsMTUuNiw5CgkJYzIuOSwyLjQsNC44LDUuNyw1LjQsOS41YzAuNSw1LjIsMC42LDEwLjQsMC40LDE1LjZjMCwwLDEwLjMsMTQuNCwxNC44LDIwLjVjNC41LDYuMiw3LDEwLjcsMTAuMywxMi43YzIuMSwxLjMsMy45LDMsNS4zLDQuOQoJCWMwLDAsNC4xLTAuNCw1LjgsMmMxLjYsMi41LDIuNSw5LjUsNS43LDExLjVTMzQyLjYsMzUzLjQsMzQwLjEsMzU1LjR6Ii8+CjwvZz4KPHJlY3QgY2xhc3M9InN0MCIgd2lkdGg9IjQwMCIgaGVpZ2h0PSI0MDAiLz4KPC9zdmc+Cg==');
	mask-repeat: no-repeat;
	-webkit-mask-repeat: no-repeat;
	mask-size: 100%;
    -webkit-mask-size: 100%;
/*
    -webkit-mask-type: luminance;
	-webkit-mask-position: center center;
*/
}



/* MASKING HOVER ON THE ITEMS */

.masking-fauna:hover {

    mask-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyMy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iZmF1bmFfeDVGX3RleHQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCINCgkgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNDAwIDQwMCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDAwIDQwMDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4NCgkuc3Qwe29wYWNpdHk6MC45O2VuYWJsZS1iYWNrZ3JvdW5kOm5ldyAgICA7fQ0KPC9zdHlsZT4NCjx0aXRsZT5mYXVuYV90ZXh0XzE8L3RpdGxlPg0KPGc+DQoJPGc+DQoJCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0xNjYuNiwyMDEuNWMtMi43LTguNi0xMS45LTEzLjMtMjAuNS0xMC42Yy04LjksMi42LTEzLjcsMTEuOC0xMSwyMS4yYzIuMyw4LjIsMTAsMTIuOSwxOC4yLDExDQoJCQljMy4xLTAuOCw1LjktMi41LDgtNWMwLDAuOSwwLDEuMywwLDEuOGMwLDIsMS4yLDMuNCwzLDMuNGMwLjEsMCwwLjIsMCwwLjMsMGMxLjctMC4xLDIuOS0xLjYsMi44LTMuM2MwLTQuOCwwLjEtOS42LTAuMS0xNC40DQoJCQlDMTY3LjMsMjA0LjIsMTY3LDIwMi44LDE2Ni42LDIwMS41eiBNMTUzLjQsMjE3LjljLTAuOCwwLjItMS43LDAuMy0yLjYsMC4zYy01LjktMC4xLTEwLjYtNC45LTEwLjYtMTAuOGMtMC4yLTYsMy42LTExLDguOS0xMS42DQoJCQljNy0wLjksMTIuMywzLjksMTIuMywxMS4yQzE2MS40LDIxMi40LDE1OC4xLDIxNi44LDE1My40LDIxNy45eiIvPg0KCQk8cGF0aCBjbGFzcz0ic3QwIiBkPSJNMjA0LjIsMTkwLjZjLTAuMy0wLjEtMC42LTAuMS0wLjktMC4xYy0xLjYsMC4yLTIuOCwxLjYtMi43LDMuMmMwLDUuNCwwLDEwLjksMCwxNi4zDQoJCQljMC4xLDIuMi0wLjgsNC4zLTIuNCw1LjhjLTMuMywyLjgtNy4xLDMtMTEsMS41Yy0zLjgtMS41LTUtNC43LTUuMS04LjVjMC00LjYsMC05LjEsMC0xMy42YzAtMC44LDAtMS41LTAuMS0yLjINCgkJCWMtMC4yLTEuNi0xLjYtMi43LTMuMi0yLjZjLTEuNiwwLTIuOSwxLjItMi45LDIuOGMtMC4xLDUuNi0wLjIsMTEuMiwwLDE2LjhjMC4zLDguOSw3LjYsMTQuNywxNi40LDEzLjVjMy4xLTAuNCw1LjktMS43LDguMi0zLjgNCgkJCWMwLDEuOCwwLjUsMywyLDMuNWMyLjEsMC44LDQuMS0wLjcsNC4xLTMuMmMwLTYsMC0xMS45LDAtMTcuOGMwLTIuOSwwLTUuOCwwLjEtOC41QzIwNi45LDE5Mi4yLDIwNS43LDE5MC44LDIwNC4yLDE5MC42eiIvPg0KCQk8cGF0aCBjbGFzcz0ic3QwIiBkPSJNMjM1LDE5MGMtNC4xLTAuMy04LjEsMS0xMS4yLDMuN2MtMC4xLTAuMy0wLjItMC40LTAuMi0wLjVjLTAuNS0yLjItMS42LTMuMS0zLjUtMi45DQoJCQljLTEuOCwwLjItMi43LDEuNC0yLjcsMy43YzAsMi42LDAsNS4yLDAsNy44YzAsNiwwLDEyLjEsMCwxOC4yYzAsMC4xLDAsMC4xLDAsMC4xYy0wLjEsMS43LDEuMiwzLjEsMi45LDMuMQ0KCQkJYzEuNywwLjIsMy4xLTEuMSwzLjItMi43YzAuMS0wLjQsMC4xLTAuOSwwLjEtMS40YzAtNS4yLDAtMTAuNSwwLTE1LjhjMC0yLDAuOC0zLjksMi4zLTUuMmMyLjMtMi4xLDUtMi42LDgtMi40DQoJCQljMy45LDAuMSw3LjIsMyw3LjksNi45YzAuMiwxLDAuMywyLjEsMC4zLDMuMmMwLDQuOCwwLDkuNSwwLDE0LjNjLTAuMSwxLjMsMC43LDIuNiwxLjksM2MwLjQsMC4yLDAuOCwwLjIsMS4zLDAuMg0KCQkJYzEuNi0wLjEsMi45LTEuNSwyLjgtMy4yYzAuMS0zLjcsMC4xLTcuNSwwLjItMTEuNWMwLjEtMi4zLTAuMS00LjUtMC4zLTYuOEMyNDcuMSwxOTUuMiwyNDEuNiwxOTAuMiwyMzUsMTkweiIvPg0KCQk8cGF0aCBjbGFzcz0ic3QwIiBkPSJNMTI5LjMsMTc2LjNjLTYuMi0wLjItMTEuNiw0LjEtMTIuOSwxMC4xYy0wLjMsMS43LTAuNiwzLjUtMC43LDUuMmMtMC45LDAtMS43LDAtMi42LDBjLTAuMSwwLTAuMSwwLTAuMiwwDQoJCQljLTEuNCwwLjEtMi41LDEuMy0yLjUsMi43YzAuMSwxLjQsMS4zLDIuNSwyLjcsMi41YzAuNiwwLDEuMiwwLDEuOCwwYzAuNywwLDEsMC4zLDEsMWMwLDAuOCwwLDEuNywwLDIuNWMwLDYuNiwwLDEzLjMsMCwxOS45DQoJCQljMCwwLjMsMCwwLjYsMC4xLDAuOWMwLjMsMS41LDEuOSwyLjUsMy41LDIuMWMxLjctMC40LDIuNS0xLjQsMi41LTMuM2MwLTcuMiwwLTE0LjQsMC0yMS42di0xLjZjMC41LDAsMSwwLDEuNCwwDQoJCQljMS42LDAsMy4zLDAuMSw1LDBoMC4xYzEuNCwwLDIuNC0xLjEsMi40LTIuNWMwLTEuNC0xLjEtMi42LTIuNS0yLjZjLTEuMiwwLTIuMywwLTMuNCwwYy0xLDAtMiwwLTMuMSwwYzAtMC44LDAtMS4zLDAtMS45DQoJCQljMC00LjYsMi44LTcuNSw3LjQtNy44YzEuOS0wLjEsMy4xLTEuMiwzLjMtMi45QzEzMi40LDE3Ny40LDEzMSwxNzYuMSwxMjkuMywxNzYuM3oiLz4NCgk8L2c+DQoJPHBhdGggY2xhc3M9InN0MCIgZD0iTTI4OS4zLDIwNS42YzAtMS40LTAuMy0yLjgtMC43LTQuMWMtMi43LTguNi0xMS45LTEzLjMtMjAuNS0xMC42Yy04LjksMi42LTEzLjcsMTEuOC0xMSwyMS4yDQoJCWMyLjMsOC4yLDEwLDEyLjksMTguMiwxMWMzLjEtMC44LDUuOS0yLjUsOC01YzAsMC45LDAsMS4zLDAsMS44YzAsMiwxLjIsMy40LDMsMy40YzAuMSwwLDAuMiwwLDAuMywwYzEuNy0wLjEsMi45LTEuNiwyLjgtMy4zDQoJCUMyODkuNCwyMTUuMiwyODkuNSwyMTAuNCwyODkuMywyMDUuNnogTTI3NS40LDIxNy45Yy0wLjgsMC4yLTEuNywwLjMtMi42LDAuM2MtNS45LTAuMS0xMC42LTQuOS0xMC42LTEwLjhjLTAuMi02LDMuNi0xMSw4LjktMTEuNg0KCQljNy0wLjksMTIuMywzLjksMTIuMywxMS4yQzI4My40LDIxMi40LDI4MC4xLDIxNi44LDI3NS40LDIxNy45eiIvPg0KPC9nPg0KPC9zdmc+DQo=');
    -webkit-mask-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAyMy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iZmF1bmFfeDVGX3RleHQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCINCgkgeT0iMHB4IiB2aWV3Qm94PSIwIDAgNDAwIDQwMCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNDAwIDQwMDsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4NCgkuc3Qwe29wYWNpdHk6MC45O2VuYWJsZS1iYWNrZ3JvdW5kOm5ldyAgICA7fQ0KPC9zdHlsZT4NCjx0aXRsZT5mYXVuYV90ZXh0XzE8L3RpdGxlPg0KPGc+DQoJPGc+DQoJCTxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0xNjYuNiwyMDEuNWMtMi43LTguNi0xMS45LTEzLjMtMjAuNS0xMC42Yy04LjksMi42LTEzLjcsMTEuOC0xMSwyMS4yYzIuMyw4LjIsMTAsMTIuOSwxOC4yLDExDQoJCQljMy4xLTAuOCw1LjktMi41LDgtNWMwLDAuOSwwLDEuMywwLDEuOGMwLDIsMS4yLDMuNCwzLDMuNGMwLjEsMCwwLjIsMCwwLjMsMGMxLjctMC4xLDIuOS0xLjYsMi44LTMuM2MwLTQuOCwwLjEtOS42LTAuMS0xNC40DQoJCQlDMTY3LjMsMjA0LjIsMTY3LDIwMi44LDE2Ni42LDIwMS41eiBNMTUzLjQsMjE3LjljLTAuOCwwLjItMS43LDAuMy0yLjYsMC4zYy01LjktMC4xLTEwLjYtNC45LTEwLjYtMTAuOGMtMC4yLTYsMy42LTExLDguOS0xMS42DQoJCQljNy0wLjksMTIuMywzLjksMTIuMywxMS4yQzE2MS40LDIxMi40LDE1OC4xLDIxNi44LDE1My40LDIxNy45eiIvPg0KCQk8cGF0aCBjbGFzcz0ic3QwIiBkPSJNMjA0LjIsMTkwLjZjLTAuMy0wLjEtMC42LTAuMS0wLjktMC4xYy0xLjYsMC4yLTIuOCwxLjYtMi43LDMuMmMwLDUuNCwwLDEwLjksMCwxNi4zDQoJCQljMC4xLDIuMi0wLjgsNC4zLTIuNCw1LjhjLTMuMywyLjgtNy4xLDMtMTEsMS41Yy0zLjgtMS41LTUtNC43LTUuMS04LjVjMC00LjYsMC05LjEsMC0xMy42YzAtMC44LDAtMS41LTAuMS0yLjINCgkJCWMtMC4yLTEuNi0xLjYtMi43LTMuMi0yLjZjLTEuNiwwLTIuOSwxLjItMi45LDIuOGMtMC4xLDUuNi0wLjIsMTEuMiwwLDE2LjhjMC4zLDguOSw3LjYsMTQuNywxNi40LDEzLjVjMy4xLTAuNCw1LjktMS43LDguMi0zLjgNCgkJCWMwLDEuOCwwLjUsMywyLDMuNWMyLjEsMC44LDQuMS0wLjcsNC4xLTMuMmMwLTYsMC0xMS45LDAtMTcuOGMwLTIuOSwwLTUuOCwwLjEtOC41QzIwNi45LDE5Mi4yLDIwNS43LDE5MC44LDIwNC4yLDE5MC42eiIvPg0KCQk8cGF0aCBjbGFzcz0ic3QwIiBkPSJNMjM1LDE5MGMtNC4xLTAuMy04LjEsMS0xMS4yLDMuN2MtMC4xLTAuMy0wLjItMC40LTAuMi0wLjVjLTAuNS0yLjItMS42LTMuMS0zLjUtMi45DQoJCQljLTEuOCwwLjItMi43LDEuNC0yLjcsMy43YzAsMi42LDAsNS4yLDAsNy44YzAsNiwwLDEyLjEsMCwxOC4yYzAsMC4xLDAsMC4xLDAsMC4xYy0wLjEsMS43LDEuMiwzLjEsMi45LDMuMQ0KCQkJYzEuNywwLjIsMy4xLTEuMSwzLjItMi43YzAuMS0wLjQsMC4xLTAuOSwwLjEtMS40YzAtNS4yLDAtMTAuNSwwLTE1LjhjMC0yLDAuOC0zLjksMi4zLTUuMmMyLjMtMi4xLDUtMi42LDgtMi40DQoJCQljMy45LDAuMSw3LjIsMyw3LjksNi45YzAuMiwxLDAuMywyLjEsMC4zLDMuMmMwLDQuOCwwLDkuNSwwLDE0LjNjLTAuMSwxLjMsMC43LDIuNiwxLjksM2MwLjQsMC4yLDAuOCwwLjIsMS4zLDAuMg0KCQkJYzEuNi0wLjEsMi45LTEuNSwyLjgtMy4yYzAuMS0zLjcsMC4xLTcuNSwwLjItMTEuNWMwLjEtMi4zLTAuMS00LjUtMC4zLTYuOEMyNDcuMSwxOTUuMiwyNDEuNiwxOTAuMiwyMzUsMTkweiIvPg0KCQk8cGF0aCBjbGFzcz0ic3QwIiBkPSJNMTI5LjMsMTc2LjNjLTYuMi0wLjItMTEuNiw0LjEtMTIuOSwxMC4xYy0wLjMsMS43LTAuNiwzLjUtMC43LDUuMmMtMC45LDAtMS43LDAtMi42LDBjLTAuMSwwLTAuMSwwLTAuMiwwDQoJCQljLTEuNCwwLjEtMi41LDEuMy0yLjUsMi43YzAuMSwxLjQsMS4zLDIuNSwyLjcsMi41YzAuNiwwLDEuMiwwLDEuOCwwYzAuNywwLDEsMC4zLDEsMWMwLDAuOCwwLDEuNywwLDIuNWMwLDYuNiwwLDEzLjMsMCwxOS45DQoJCQljMCwwLjMsMCwwLjYsMC4xLDAuOWMwLjMsMS41LDEuOSwyLjUsMy41LDIuMWMxLjctMC40LDIuNS0xLjQsMi41LTMuM2MwLTcuMiwwLTE0LjQsMC0yMS42di0xLjZjMC41LDAsMSwwLDEuNCwwDQoJCQljMS42LDAsMy4zLDAuMSw1LDBoMC4xYzEuNCwwLDIuNC0xLjEsMi40LTIuNWMwLTEuNC0xLjEtMi42LTIuNS0yLjZjLTEuMiwwLTIuMywwLTMuNCwwYy0xLDAtMiwwLTMuMSwwYzAtMC44LDAtMS4zLDAtMS45DQoJCQljMC00LjYsMi44LTcuNSw3LjQtNy44YzEuOS0wLjEsMy4xLTEuMiwzLjMtMi45QzEzMi40LDE3Ny40LDEzMSwxNzYuMSwxMjkuMywxNzYuM3oiLz4NCgk8L2c+DQoJPHBhdGggY2xhc3M9InN0MCIgZD0iTTI4OS4zLDIwNS42YzAtMS40LTAuMy0yLjgtMC43LTQuMWMtMi43LTguNi0xMS45LTEzLjMtMjAuNS0xMC42Yy04LjksMi42LTEzLjcsMTEuOC0xMSwyMS4yDQoJCWMyLjMsOC4yLDEwLDEyLjksMTguMiwxMWMzLjEtMC44LDUuOS0yLjUsOC01YzAsMC45LDAsMS4zLDAsMS44YzAsMiwxLjIsMy40LDMsMy40YzAuMSwwLDAuMiwwLDAuMywwYzEuNy0wLjEsMi45LTEuNiwyLjgtMy4zDQoJCUMyODkuNCwyMTUuMiwyODkuNSwyMTAuNCwyODkuMywyMDUuNnogTTI3NS40LDIxNy45Yy0wLjgsMC4yLTEuNywwLjMtMi42LDAuM2MtNS45LTAuMS0xMC42LTQuOS0xMC42LTEwLjhjLTAuMi02LDMuNi0xMSw4LjktMTEuNg0KCQljNy0wLjksMTIuMywzLjksMTIuMywxMS4yQzI4My40LDIxMi40LDI4MC4xLDIxNi44LDI3NS40LDIxNy45eiIvPg0KPC9nPg0KPC9zdmc+DQo=');
	mask-repeat: no-repeat;
	-webkit-mask-repeat: no-repeat;
	mask-size: 100%;
    -webkit-mask-size: 100%;
/*
    -webkit-mask-type: luminance;
	-webkit-mask-position: center center;
*/
transform: rotateY(180deg);

}

              
            
!

JS

              
                
              
            
!
999px

Console