<!DOCTYPE html>
<html>
<head>
<title>3D Pie Chart with CSS</title>
<style>
body {
background-color: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.pie-chart {
width: 200px;
height: 200px;
border-radius: 50%;
position: relative;
perspective: 800px; /* Creates 3D perspective */
transform-style: preserve-3d; /* Preserves 3D transformations */
}
.slice {
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
clip: rect(0, 100px, 200px, 0); /* Initial clip for half-circle */
transform-origin: left center; /* Rotation origin */
}
.slice .half {
width: 100%;
height: 100%;
border-radius: 50%;
background-color: #eee; /* Default color for back face */
transform: translateZ(-1px); /* Slightly offset for visibility */
}
/* Individual slice styles and rotations */
.slice:nth-child(1) {
background-color: #f44336;
transform: rotate(0deg); /* Starting angle */
}
.slice:nth-child(2) {
background-color: #2196f3;
transform: rotate(90deg); /* Accumulated angle */
clip: rect(0, 200px, 200px, 100px); /* Adjust clip for second half */
}
.slice:nth-child(3) {
background-color: #4caf50;
transform: rotate(225deg); /* Accumulated angle */
clip: rect(0, 200px, 200px, 100px);
}
.slice:nth-child(4) { /* Example of smaller slice */
background-color: #ffeb3b;
transform: rotate(300deg);
clip: rect(0, 200px, 200px, 100px);
}
/* Add a 3D effect with shadows (optional) */
.pie-chart:before {
content: '';
position: absolute;
width: 90%;
height: 90%;
border-radius: 50%;
background-color: rgba(0, 0, 0, 0.1);
top: 5%;
left: 5%;
z-index: -1;
filter: blur(2px); /* Soften the shadow */
}
</style>
</head>
<body>
<div class="pie-chart">
<div class="slice">
<div class="half"></div>
</div>
<div class="slice">
<div class="half"></div>
</div>
<div class="slice">
<div class="half"></div>
</div>
<div class="slice">
<div class="half"></div>
</div>
</div>
</body>
</html>
Explanation and Key Improvements:
- 3D Perspective: The
perspectiveproperty on the.pie-chartcontainer creates the 3D space.transform-style: preserve-3densures that child elements maintain their 3D transformations. - Slice Rotation: Each
.sliceis rotated usingtransform: rotate(angle). The angles are cumulative to create the pie effect. - Half-Circles and Clipping: The
clip: rect()property creates the half-circle shapes. The values are adjusted for the second and subsequent slices to ensure they fit together correctly. This is a cleaner approach than using pseudo-elements. - Transform Origin:
transform-origin: left centersets the rotation point to the left edge of the circle, which is crucial for the pie chart effect. - Back Face Color: The
.halfelement inside each slice provides a consistent background color for the back face of