breathing/morphing cube (CSS)

In this example below you will see how to do a breathing/morphing cube (CSS) with some HTML / CSS and Javascript

A cube that morphs into a rhombic dodecahedron. CHROME EXPERIMENT!!!

Thumbnail
This awesome code was written by , you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright ⁣ ©
  • HTML
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>breathing/morphing cube (CSS)</title>
  
  
  <link rel='stylesheet prefetch' href='css/https___codepen_io_pixela.css'>
<link rel='stylesheet prefetch' href='css/https___codepen_io_pixela.css'>

  
  
</head>

<body>

  
<div class="pane">
  <div class="cube"> 
    <div class="face outer">
      <div class="face inner"></div>
      <div class="face inner"></div>
      <div class="face inner"></div>
      <div class="face inner"></div>
    </div>
    <div class="face outer">
      <div class="face inner"></div>
      <div class="face inner"></div>
      <div class="face inner"></div>
      <div class="face inner"></div>
    </div>
    <div class="face outer">
      <div class="face inner"></div>
      <div class="face inner"></div>
      <div class="face inner"></div>
      <div class="face inner"></div>
    </div>
    <div class="face outer">
      <div class="face inner"></div>
      <div class="face inner"></div>
      <div class="face inner"></div>
      <div class="face inner"></div>
    </div>
    <div class="face outer">
      <div class="face inner"></div>
      <div class="face inner"></div>
      <div class="face inner"></div>
      <div class="face inner"></div>
    </div>
    <div class="face outer">
      <div class="face inner"></div>
      <div class="face inner"></div>
      <div class="face inner"></div>
      <div class="face inner"></div>
    </div>
  </div>
</div>
  
  

</body>

</html>

Comments