.slider-container {
width: 400px;
height: 300px;
perspective: 1000px;
margin: 0 auto;
}
.slider {
width: 100%;
height: 100%;
position: relative;
transform-style: preserve-3d;
animation: slide-rotate 15s infinite;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
}
.slide {
position: absolute;
width: 90%;
height: 90%;
top: 5%;
left: 5%;
backface-visibility: hidden;
transform-style: preserve-3d;
display: flex;
justify-content: center;
align-items: center;
color: white;
font-size: 24px;
font-weight: bold;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
border-radius: 10px;
transform: translateZ(-200px);
}
.slide1 {
background-color: #ff6384;
}
.slide2 {
background-color: #36a2eb;
transform: translateZ(0);
}
.slide3 {
background-color: #cc65fe;
transform: translateZ(200px);
}
@keyframes slide-rotate {
0% {
transform: rotateY(0);
}
25% {
transform: rotateY(-90deg);
}
50% {
transform: rotateY(-180deg);
}
75% {
transform: rotateY(-270deg);
}
100% {
transform: rotateY(-360deg);
}
}
Certainly! The code provided is an HTML and CSS implementation of a 3D slider. Here's a description of the code and its functionality:
HTML:
- The slider is contained within a `<div>` element with the class "slider-container".
- Inside the container, there is another `<div>` element with the class "slider" that holds the slides.
- The slides are represented by `<div>` elements with the classes "slide slide1", "slide slide2", and "slide slide3". Each slide contains an `<h1>` element with the slide's content.
CSS:
- The ".slider-container" class sets the dimensions of the slider container and applies a perspective effect to create the 3D view.
- The ".slider" class represents the container for the slides and specifies its positioning and appearance.
- The ".slide" class represents each individual slide. It sets the position, dimensions, and styling of the slides, such as their background color, font size, font weight, box shadow, and border radius.
- The ".slide1", ".slide2", and ".slide3" classes define the specific styles for each slide.
- The "@keyframes slide-rotate" rule specifies the animation of the slider. It rotates the slider around the Y-axis at different percentages to create a spinning effect.
The code positions the slides in a 3D space using the `translateZ` property. Each slide is positioned at a different distance from the viewer, allowing them to overlap and create a 3D effect. The slides rotate around the Y-axis to create a spinning motion.
Please note that this code provides a basic foundation for a 3D slider, and you can further customize it according to your preferences by adjusting the styles, dimensions, animation timings, or adding additional functionality.
Let me know if you need any further clarification or assistance!
No comments:
Post a Comment