Source code:
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>Professional 3D CSS Calendar</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(135deg, #2c3e50, #4ca1af);
font-family: sans-serif;
}
.calendar{
perspective: 1500px;
max-width: 450px;
min-width: min-content;
}
.calendar-wrapper{
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 10px;
background: #ffffff;
padding: 20px;
border-radius: 15px;
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
transform-style: preserve-3d;
transform: rotateX(15deg);
transition: transform 0.5s ease;
}
.calendar:hover .calendar-wrapper{
transform: rotateX(0);
}
.day-header{
font-size: 0.9rem;
font-weight: bold;
text-align: center;
text-transform: uppercase;
color: #2c3e50;
background: #f1f1f1;
padding: 10px;
border-radius: 10px;
box-shadow: inset 0 -2px 5px rgba(0, 0, 0, 0.1);
}
.day{
display: flex;
justify-content: center;
align-items: center;
font-size: 1.2rem;
font-weight: bold;
color: #34495e;
background: #f8f9fa;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
transition: transform 0.3s, background 0.3s, color 0.3s;
}
.day:hover {
transform: translateY(-10px);
background: #3498db;
color: #ffffff;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
.day.today{
background: #e74c3c;
color: #ffffff;
box-shadow: 0 5px 15px rgba(231, 76, 60, 0.3);
}
.day.inactive{
color: #bdc3c7;
background: #ecf0f1;
box-shadow: none;
cursor: not-allowed;
}
</style>
</head>
<body>
<div class=”calendar”>
<div class=”calendar-wrapper”>
<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>
<!– Calendar days –>
<div class=”day inactive”></div>
<div class=”day inactive”></div>
<div class=”day inactive”></div>
<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 today”>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 inactive”></div>
<div class=”day inactive”></div>
<div class=”day inactive”></div>
<div class=”day inactive”></div>
<div class=”day inactive”></div>
</div>
</div>
</body>
</html>
