HTML create 3d cube shadow html, css - Net-Raft.com

Welcome aboard! We are happy you are here and wish you good net-raft!




Just a Web Code Solution

How to create 3D cube with shadow using html, css ?


 373

Show ResultHTML


3

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<style>
* {
margin: 0px;
padding: 0px;
}

html, body {
width: 100%;
height: 100%;
}

.cube {
width: 100px;
height: 100px;
position: relative;
transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-webkit-transform-style: preserve-3d;
transform: rotateX(-20deg) rotateY(-45deg);
-webkit-transform: rotateX(-20deg) rotateY(-45deg);
-moz-transform: rotateX(-20deg) rotateY(-45deg);
top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -100px;
}

.cube div {
width: 100px;
height: 100px;
position: absolute;
background: orange;
border: 2px solid black;
box-shadow: inset 0px 0px 30px rgba(0, 0, 0, 0.8);
}

.cube div.top_side {
transform: rotateX(90deg);
margin-top: -50px;
}

.cube div.right_side {
transform: rotateY(90deg);
margin-left: 50px;
}

.cube div.bottom_side {
transform: rotateX(90deg);
margin-top: 50px;
}

.cube div.left_side {
transform: rotateY(-90deg);
margin-left: -50px;
}

.cube div.front_side {
transform: translateZ(50px);
}

.cube div.back_side {
transform: translateZ(-50px);
}

</style>
</head>
<body>

<div class="cube">
<div class="top_side"></div>
<div class="right_side"></div>
<div class="bottom_side"></div>
<div class="left_side"></div>
<div class="back_side"></div>
<div class="front_side"></div>
</div>

</body>
</html> 


By     Created   
The power of the user (%)
43%



The most helpful HTML solutions

Who we can create sub domain in HTML in our site ?Who we can create sub domain in HTML in our site ?HTML

Click to see more ...

  435     56

How to create 3D cube with shadow using html, css ?How to create 3D cube with shadow using html, css ?HTML

Click to see more ...

  373     29

how to create the moving picture up and down in html ?how to create the moving picture up and down in html ?HTML

Click to see more ...

  291     23

How to create the rolling and rotating cube with stop and start button in html, css, jquery ?How to create the rolling and rotating cube with stop and start button in html, css, jquery ?HTML

Click to see more ...

  156     23

how to create a moving picture using html ?how to create a moving picture using html ?HTML

Click to see more ...

  158     15

How to trigger video in html ?How to trigger video in html ?HTML

Click to see more ...

  97     14

redirect to another page submit using htmlredirect to another page submit using htmlHTML

Click to see more ...

  156     13

How to trigger youtube video in html ?How to trigger youtube video in html ?HTML

Click to see more ...

  83     10

How to create 3D cylinder using html, css, jquery ?How to create 3D cylinder using html, css, jquery ?HTML

Click to see more ...

  98     5

how to create the moving picture left and right in html ?how to create the moving picture left and right in html ?HTML

Click to see more ...

  105     6