CodePen Embed - 3D Nahal cube

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3D Nahal</title>
    <link rel="stylesheet" href="style.css">

<body>

    <div class="container">
        <h1 class="title"> Nahal Board </h1>
        <div class="cube">
            
            <div class="front"><img src="http://uupload.ir/files/j8hd_dsc02359.png" alt=""width="150%" style="position: absolute; margin: auto; left: -20px;  right: 0; top: 0; bottom: 0;" ></div>
            <div class="back"><img src="http://uupload.ir/files/j8hd_dsc02359.png" alt="" width="150%" style="position: absolute; margin: auto; left: -20px; right: 0; top: 0; bottom: 0; "  ></div>
            <div class="right"><img src="http://uupload.ir/files/j8hd_dsc02359.png" alt=""width="150%" style="position: absolute; margin: auto; left: -20px; right: 0; top: 0; bottom: 0; "  ></div>
            <div class="left"><img src="http://uupload.ir/files/j8hd_dsc02359.png" alt="" width="150%" style="position: absolute; margin: auto; left: -20px; right: 0; top: 0; bottom: 0; "  ></div>
            <div class="top"><img src="http://uupload.ir/files/j8hd_dsc02359.png" alt=""  width="150%" style="position: absolute; margin: auto; left: -20px; right: 0; top: 0; bottom: 0; "  ></div>
            <div class="bottom"><img src="http://uupload.ir/files/j8hd_dsc02359.png"alt=""width="150%" style="position: absolute; margin: auto; left: -20px; right: 0; top: 0; bottom: 0; "  ></div>
        </div>
    </div>




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

</script>

</html>

.container{
    width: 150px;
    height: 150px;
    position: absolute;
    left: 40%;
    top: 34%;
    perspective: 1000px;

    font-size: 25px;
    text-align: center;
}

.cube{
    width: 200px;
    height: 200px;
    position: relative;
    margin: auto;
    transform-style: preserve-3d;
    transition: transform 3.5s ease;
}

.cube:hover{
    transform: rotateX(1.5turn) rotateY(2turn) ;
}

.cube div{
    position: absolute;
    width: 200px;
    height: 200px;
    text-align: center;
    border: 3px solid black;
    background-image: url(http://uupload.ir/files/untp_background.png);
    background-size: 100%;
}

.back{
    transform: translateZ(-100px) rotateX(180deg);
}

.left{
    transform: translateX(-100px) rotateY(-90deg) ;
}

.right{
    transform: translateX(100px) rotateY(90deg);
}

.front{
    transform: translateZ(100px);
}

.top{
    transform: translateY(-100px) rotateX(90deg);
}

.bottom{
    transform: translateY(100px) rotateX(-90deg);
}

.title{
  position: relative;
  margin: auto;
  width: 280px;
  left: -40px;
  top: -80px;
  cursor: pointer;
  transition: .4s;
}

.title:hover{
  text-shadow: 0px 0px 20px black;
}

This Pen is owned by Parsa on CodePen.

See more by @parsefi on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.