Source code:
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>3D CSS Calendar</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
body{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #121212;
color: #fff;
overflow: hidden;
width: 80%;
margin: 0 auto;
}
.calendar{
perspective: 1000px;
}
.calendar-wrapper{
display: grid;
grid-template-columns: repeat(7, 1fr);
grid-gap: 10px;
transform-style: preserve-3d;
transform: rotateX(30deg) rotateY(-30deg);
transition: 0.5s ease;
}
.calendar:hover .calendar-wrapper{
transform: rotateX(0) rotateY(0);
}
.day{
width: 50px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
background: #1e1e1e;
border: 1px solid #333;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0,0,0,0.3);
transition: transform 0.3s ease, background 0.3s ease;
font-size: 1.2rem;
font-weight: bold;
}
.day:hover{
background: #ff5722;
transform: translateY(-20px) scale(1.1) rotate(20deg);
}
.day-header{
font-size: 0.8rem;
text-transform: uppercase;
font-weight: bold;
color: #bbb;
}
</style>
</head>
<body>
<div class=”calendar”>
<div class=”calendar-wrapper”>
<!– Days Header –>
<div class=”day-header”>Sun</div>
<div class=”day-header”>Mon</div>
<div class=”day-header”>Tue</div>
<div class=”day-header”>Wed</div>
<div class=”day-header”>Thu</div>
<div class=”day-header”>Fri</div>
<div class=”day-header”>Sat</div>
<!– Calenar Days –>
<div class=”day”>1</div>
<div class=”day”>2</div>
<div class=”day”>3</div>
<div class=”day”>4</div>
<div class=”day”>5</div>
<div class=”day”>6</div>
<div class=”day”>7</div>
<div class=”day”>8</div>
<div class=”day”>9</div>
<div class=”day”>10</div>
<div class=”day”>11</div>
<div class=”day”>12</div>
<div class=”day”>13</div>
<div class=”day”>14</div>
<div class=”day”>15</div>
<div class=”day”>16</div>
<div class=”day”>17</div>
<div class=”day”>18</div>
<div class=”day”>19</div>
<div class=”day”>20</div>
<div class=”day”>21</div>
<div class=”day”>22</div>
<div class=”day”>23</div>
<div class=”day”>24</div>
<div class=”day”>25</div>
<div class=”day”>26</div>
<div class=”day”>27</div>
<div class=”day”>28</div>
<div class=”day”>29</div>
<div class=”day”>30</div>
<div class=”day”>31</div>
</div>
</div>
</body>
</html>
