A Pen by Anthony

Thumbnail
This awesome code was written by anthonygermishuys, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright anthonygermishuys ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Anthony</title>
  
  
  <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="controls-stage">
<div class="controls">  
<div class="control fa fa-bars" id="3d"></div> 
<div class="control fa fa-cube" id="Cube"></div>   
<div class="control fa fa-eye" id="See"></div>
</div> 
</div>  


    <div id="stage">
      <div id="shape" class="cube backfaces">
        <div class="plane one"></div>
        <div class="plane two"></div>
        <div class="plane three"></div>
        <div class="plane four"></div>
        <div class="plane five"></div>
        <div class="plane six"></div>
        <div class="plane seven"></div>
        <div class="plane eight"></div>
        <div class="plane nine"></div>
        <div class="plane ten"></div>
        <div class="plane eleven"></div>
        <div class="plane twelve"></div>
      </div>
    </div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/anthonygermishuys/a-pen-by-anthony-aGpEQW */
body {overflow:hidden;
background:radial-gradient(#000 16%, transparent 17%),radial-gradient(#444 16%, transparent 17%) 0px 1px,
radial-gradient(#000 16%, transparent 17%) 8px 8px,radial-gradient(#444 16%, transparent 17%) 8px 9px;
  background-color:#282828;background-size: 16px 16px;}

.controls-stage,.controls {position:absolute;top:0;left:20px;bottom:0;margin:auto;z-index:100;}

.controls-stage {-webkit-perspective:800px;}
.controls-stage * {-webkit-transform-style:preserve-3d;}

.controls {height:150px;}

.control {position:relative;height:50px;width:50px;background:#222;
font-size:30px;color:#111;text-align:center;line-height:50px;
text-shadow: 0px 1px 2px rgba(255, 255, 255, 0.2), -1px -1px 1px rgba(0, 0, 0, 0.2); 
border:1px solid rgba(204,204,204,0.4);  
border-bottom:1px solid rgba(0,0,0,0.8);
box-sizing:border-box;
-webkit-box-shadow:-1px 5px 8px rgba(0, 0, 0, 0.6);
-webkit-transition:-webkit-transform 1s ease;  
}

.control:nth-child(1) {background:#111;}

.control:before {
background:-webkit-linear-gradient(white,#C0C0C0);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
text-shadow:0px 2px 2px rgba(0,0,0,0.6);}

.control:nth-child(n+2):hover:before{background:#222;
-webkit-text-fill-color:#111;
text-shadow: 0px 1px 2px rgba(255, 255, 255, 0.2), -1px -1px 1px rgba(0, 0, 0, 0.2);}

.control:nth-child(2):after,
.control:nth-child(3):after
{position:absolute;left:49px;top:15px;height:25px;display:none; 
background:#111;font-size:20px;color:white;line-height:25px;
border:1px solid rgba(204,204,204,0.4);
border-left:none;
box-sizing:border-box;}

.control:nth-child(2):after{content:'Shape';width:70px;}
.control:nth-child(3):after{content:'BackFace Visibility';width:180px;}

.control:hover:after{display:block;}

#stage {position:absolute;top:0;left:0;bottom:0;right:0;margin:auto;
width:100%;height:100%;    
-webkit-transform-style:preserve-3d;
-webkit-perspective:800;}
    
#shape {position:absolute;top:0;left:0;bottom:0;right:0;margin:auto;
height:200px;width:200px;-webkit-transform-style: preserve-3d;}

#shape:after {content:'';position:absolute;height:inherit;width:inherit;
background:black;box-shadow:0 0 40px rgba(0,0,0,1);
-webkit-transform:scale3d(1.3, 1.3, 1.3) translateY(120px) rotateX(-90deg);}

#shape.cube:after {opacity:.4;-webkit-transition:opacity 1s ease 1s;}
#shape.ring:after {opacity:0;-webkit-transition:opacity 1s ease;}

#shape.cube  {-webkit-transform:translateZ(0) rotateY(0);}
#shape.ring  {-webkit-transform:translateZ(-200px) rotateY(0);}

#shape.cube {-webkit-animation:spin 16s infinite linear;}
#shape.ring {-webkit-animation:spin2 16s infinite linear;}

@-webkit-keyframes spin {
to {-webkit-transform:translateZ(0) rotateY(-360deg);}
}

@-webkit-keyframes spin2 {
to {-webkit-transform:translateZ(-200px) rotateY(-360deg);}
}

#shape.cube .plane {border-radius:0px;}
#shape.ring .plane {border-radius:12px;-webkit-box-shadow:-1px 5px 8px rgba(0, 0, 0, 0.6);}
#shape.backfaces .plane {-webkit-backface-visibility:visible;}
    
.plane {position:absolute;height:200px;width:200px;
border:1px solid white;box-sizing:border-box;
background-color:rgba(0,0,0,.6);
-webkit-transition:all 2s ease;
-webkit-backface-visibility:hidden;}

    /* ---------- cube styles ------------- */
    
.cube > .plane:nth-child(-n + 6) {background-color: rgba(0, 0,0, 0.3);}

.cube > .one {
-webkit-transform:scale3d(1.2,1.2,1.2) rotateX(90deg) translateZ(100px);}

.cube > .two {-webkit-transform:scale3d(1.2, 1.2, 1.2) translateZ(100px);}

.cube > .three {
-webkit-transform:scale3d(1.2, 1.2, 1.2) rotateY(90deg) translateZ(100px);}

.cube > .four {
-webkit-transform:scale3d(1.2,1.2,1.2) rotateY(180deg) translateZ(100px);}

.cube > .five {
-webkit-transform:scale3d(1.2,1.2,1.2) rotateY(-90deg) translateZ(100px);}

.cube > .six {      
-webkit-transform:scale3d(1.2,1.2,1.2) rotateX(-90deg) translateZ(100px) rotate(180deg);}

.cube > .seven {
 -webkit-transform:scale3d(0.8,0.8,0.8) rotateX(90deg) translateZ(100px) rotate(180deg);}

.cube > .eight {
-webkit-transform:scale3d(0.8, 0.8, 0.8) translateZ(100px);}

.cube > .nine {-webkit-transform:scale3d(0.8,0.8,0.8) rotateY(90deg) translateZ(100px);}

.cube > .ten {-webkit-transform:scale3d(0.8,0.8,0.8) rotateY(180deg) translateZ(100px);}

.cube > .eleven {-webkit-transform:scale3d(0.8,0.8,0.8) rotateY(-90deg) translateZ(100px);}

.cube > .twelve {-webkit-transform:scale3d(0.8, 0.8, 0.8) rotateX(-90deg) translateZ(100px);}

/* ---------- ring styles ------------- */
    
.ring > .one {-webkit-transform:translateZ(380px);}

.ring > .two {-webkit-transform:rotateY(30deg) translateZ(380px);}

.ring > .three {-webkit-transform:rotateY(60deg) translateZ(380px);}

.ring > .four {-webkit-transform:rotateY(90deg) translateZ(380px);}

.ring > .five {-webkit-transform:rotateY(120deg) translateZ(380px);}

.ring > .six  {-webkit-transform:rotateY(150deg) translateZ(380px);}

.ring > .seven {-webkit-transform:rotateY(180deg) translateZ(380px);}

.ring > .eight {-webkit-transform:rotateY(210deg) translateZ(380px);}

.ring > .nine {-webkit-transform:rotateY(-120deg) translateZ(380px);}

.ring > .ten  {-webkit-transform:rotateY(-90deg) translateZ(380px);}

.ring > .eleven {-webkit-transform:rotateY(300deg) translateZ(380px);}

.ring > .twelve {-webkit-transform:rotateY(330deg) translateZ(380px);}




/*Downloaded from https://www.codeseek.co/anthonygermishuys/a-pen-by-anthony-aGpEQW */
$('.control').hover(function(){
if ($(this).is(':nth-child(3)')) {$(this).toggleClass('fa-eye fa-eye-slash');}
if ($(this).is(':nth-child(2)')) {$(this).toggleClass('fa-cube fa-square');}
});

$('.control').on('click', function(){
if ($(this).is(':nth-child(3)')) {$(this).toggleClass('fa-eye fa-eye-slash');toggleBackfaces();}
if ($(this).is(':nth-child(2)')) {$(this).toggleClass('fa-cube fa-square');toggleShape();}
});

function toggleShape() {
    if($('#shape').hasClass('ring')){
       $('#shape').removeClass('ring').addClass('cube');
    }else{
       $('#shape').removeClass('cube').addClass('ring');
    }
};

function toggleBackfaces() {$('#shape').toggleClass('backfaces');}

Comments