Ground Tutorial is a blog that shares tutorials on web design and development. Here you will find designs and tutorials on HTML, CSS, JavaScript, Bootstrap and JQuery.
3D Image Slider using HTML & CSS (Code + Demo)
Get link
Facebook
X
Pinterest
Email
Other Apps
Do you want to create a 3D Image Slider using HTML and CSS?
If your answer is yes then this tutorial will help you completely. In this article, I have shown you how to create a 3D Image Slider. Image sliders are used in many places. Earlier I shared with you the tutorial for almost all design image sliders. It's a little different.
In this case, by adding the images together at a certain angle, the shape of the 3D Image Slider has been given. Undoubtedly the kind of design will make your webpage more attractive.
3D Cube Image Slider CSS
In this case, the images will continue to change automatically from time to time. Nine images have been used here. Each image is attached to the other at a 40-degree angle. Width of each image: 200px and some space between the images.
Arrangements have been made to automatically change these images using animations and @keyframes. Only HTML and CSS are used to create this CSS 3D Image Slider.
The images are first added by HTML and then by CSS the images are added at different angles and arranged in the form of a 3D Slider.
How to create a CSS 3D Image Slider
To create this 3D Image Slider, first, you need to create an HTML and CSS file. I have not shared any tutorial here. But before that, I have shared step by step tutorial of another 3D Image Slider HTML CSS of this kind.
Here I have given the necessary codes. You will copy those codes directly and add them to your file.
HTML Code (index.html)
The following codes are HTML codes. Copy these codes and add them to your HTML file.
Now it's time to design the 3D Image Slider by CSS and activate the slider. To do this, copy the following code and add it to your CSS file.
/* Design the webpage */
* {
margin: 0;
padding: 0;
}
html, body {
max-width: 100%;
overflow-x: hidden;
overflow-y: hidden;
background-color: #5bccee;
}
/*Slider basic area*/
#slideshow {
margin: 0auto;
background-color: #5bccee;
box-sizing: border-box;
padding-top: 50px;
height: 600px;
width: 100%;
}
/*slider area*/
.entire-content {
margin: auto;
position: relative;
padding-top: 80px;
width: 200px;
perspective: 1000px;
}
.content-carrousel {
width: 100%;
position: absolute;
float: right;
animation: rotar 15sinfinitelinear;
transform-style: preserve-3d;
}
/*slider hover effect*/
.content-carrousel:hover {
animation-play-state: paused;
cursor: pointer;
}
/* images*/
.content-carrouselfigure {
width: 100%;
overflow: hidden;
position: absolute;
height: 120px;
border: 1pxsolid#3b444b;
}
/* make it 3d */
.content-carrouselfigure:nth-child(1) {
transform: rotateY(0deg) translateZ(300px);
}
.content-carrouselfigure:nth-child(2) {
transform: rotateY(40deg) translateZ(300px);
}
.content-carrouselfigure:nth-child(3) {
transform: rotateY(80deg) translateZ(300px);
}
.content-carrouselfigure:nth-child(4) {
transform: rotateY(120deg) translateZ(300px);
}
.content-carrouselfigure:nth-child(5) {
transform: rotateY(160deg) translateZ(300px);
}
.content-carrouselfigure:nth-child(6) {
transform: rotateY(200deg) translateZ(300px);
}
.content-carrouselfigure:nth-child(7) {
transform: rotateY(240deg) translateZ(300px);
}
.content-carrouselfigure:nth-child(8) {
transform: rotateY(280deg) translateZ(300px);
}
.content-carrouselfigure:nth-child(9) {
transform: rotateY(320deg) translateZ(300px);
}
.content-carrouselfigure:nth-child(10) {
transform: rotateY(360deg) translateZ(300px);
}
/* image shadow*/
.shadow {
position: absolute;
box-shadow: 0px0px20px0px#000;
border-radius: 1px;
}
/*slider image*/
.content-carrouselimg {
width: 100%;
height: 100%;
image-rendering: auto;
transition: all300ms;
}
/*images hover effect*/
.content-carrouselimg:hover {
transform: scale(1.2);
transition: all300ms;
}
/* rotate animation*/
@keyframes rotar {
from {
transform: rotateY(0deg);
} to {
transform: rotateY(360deg);
}
}
If you have difficulty copying the above code, use the download button below. All the codes in this 3D Image Slider are linked together. Hopefully, you have been able to create this CSS 3D Image Slider using the above code.
In this article, you will learn how to create Custom Select Box using HTML CSS, and JavaScript. custom select dropdown we use in many places. This is a kind of dropdown menu . However, it is much more modern than the general dropdown menu. This type of HTML custom Select Box has a small box. Clicking on which will bring up a dropdown. There are many options in that dropdown . The option that you select will be found in that box. If you click on that box again, you will see the options again. If you select any other option, in the same way, that option will also be seen in that custom select box . If you have a basic idea about HTML and CSS , you can easily create it. Custom Select Box CSS Here I have used a small amount of jquery. But if you do not know jquery then there will be no problem. Because very little JavaScript has been used here. Below is a demo that will help you learn how this HTML CSS custom select dropdown works. See the Pen HTML CSS Custom ...
Here you will learn how to create Splash Image Mask using HTML CSS . The CSS mask image is a kind of simple design where there will be a background color on the image. Some parts of that background will be transparent. As a result, we get to see some of the images in the background. You can use this CSS Splash Image Mask in any background image. Here I used HTML in Aklin which added image. Then I designed it with CSS. You can use this CSS mask background image in the background of any project. Below is a preview that will help you to know how this Splash Image Mask CSS was created. See the Pen Splash Image Mask using Html CSS by Shantanu Jana ( @shantanu-jana ) on CodePen . Here HTML and CSS are used to create this CSS mask-image property . For this, you create an HTML and CSS file. Copy all the code given below and add it to your file. Or use the download button at the bottom of the article to download the code for this Splash Image Mask . HTML Code:...
If you want to make a CSS Toggle Switch with Text using HTML and CSS then this tutorial will help you. Here I have shown step by step how to make a CSS Toggle Switch . Earlier I shared with you many more types of Toggle Button with Text Enhancement Tutorial. Those designs were a bit complicated. This project is relatively simple. If you are a beginner then this design will help you completely. Here I have used only HTML and CSS. This beautiful CSS Toggle Switch is made using one-line HTML and some amount of CSS. Toggle we use in different places. It is mainly used to turn on and off various options and to select any one of the many options. CSS Toggle Switch with Text Below is a demo that will help you learn how it works. Below you will find the required preview and source code. See the Pen Untitled by Ground Tutorial ( @groundtutorial ) on CodePen . As you can see above, a small area on the webpage has been created using input. Which contains a button. Normally t...
Comments
Post a Comment
Tell me what you think ??😎