Hello friends today in this blog you will learn how to make social media icons rotate 3D page using html and CSS, you will know what is social media icon like Facebook, telegram, twitter etc ... all social media is 3D page It is designed on which the page rotate by animation. You will learn to make this rotate page easily.
We have previously shared a social media button which you can read by clicking on this link and get the source code of that social media button.
This social media icons page is designed only as a design, it has no function, you will learn to create this 3D page in html and CSS. If you are in the beginning and you know html and css then you will understand it well.
This image that you are looking at is a 3D social media rotate page, made from this html and CSS, this page is rotated by animation which you are fascinated to see, this html to design a 3D page. And telling some code of CSS, we have written the four <span> tag inside the <div> code in html, there are two <li> tag inside these tags, in which font awesome tag is written and styling all these tags with CSS. has been done
If you are having difficulty in understanding the design of this 3D Social Media rotate page, then you can understand this by watching the video of this 3D rotate page, in which full tutorial is given, click on the video to see it.
Video Tutorial of Social Media Icons Rotate 3D Page With Animation
I sincerely hope that you have understood this 3D rotate page and by looking at its code, you must have understood how the code has been written, in this how you rotate page is designed with CSS animation. Shall forward
Social Media Icons Rotate 3D Page With Animation Source Codes
The hub is aware of the html of this social media icons rotate 3D page with animation. First of all we have a div named class box and another div is taken inside the box which is not named class and this div Four span tags are taken inside. Span tag is also called inline element. Two i tags are taken inside this tag. Here i tag is not used for italic or it is used for font icon which you Looking up as a social media icon
We have written the icon class name fa fa-Facebook-square inside the i tag of the first span tag. With this class name you can print the online font icon on your page par. C class name is used for the Facebook icon and span tag In the second, it took two i tags on it and both have the same class name, the class name of this tag is fa fa-youtube, so that you can print the icon on your page by YouTube.
And in the span tag third, we have given two class names inside the i tag which is named fa fa-google-plus here here the icon of google plus with this class name is preferred on the page you are seeing in the image and span tag The fourth under is also taken as a class like this named fa fa-twitter. It is used for the twitter icon.
To know about its css, first we zeroed the margin and padding to the body in the css and then colored the background and after that we also gave a position to the clasps box and sized the width and height, after giving the size of the box Rotated which you see in the image above, after this, in the box-before class box, we gave the shadow of the box by giving the background of the box. It has been styled animation by giving width and height to the under div of the class box which rotates at full 360 degrees and the under i tag of this div under span tag which has the under font icon or the icon of social media. Color is given and its size is also given
You copy the code of this social media below here and paste it into the system file, which you can learn to design the design of this media properly.
If you like this social media icons rotate 3D page, I mean to say that if you want the source code of this page then you can get the two files which we have given below html and CSS code file by scrolling and copying these two files. You can also paste it in your file, which will make you easier to understand.
HTML CODE FILE :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="rotate.css" rel="stylesheet">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"
integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
</head>
<body>
<div class="box">
<div>
<span><i class="fa fa-facebook-square"></i><i class="fa fa-facebook-square"></i></span>
<span><i class="fa fa-youtube"></i><i class="fa fa-youtube"></i></span>
<span><i class="fa fa-google-plus"></i><i class="fa fa-google-plus"></i></span>
<span><i class="fa fa-twitter"></i><i class="fa fa-twitter"></i></span>
</div>
</div>
</body>
</html>
CSS CODE FILE :
body {
margin: 0;
padding: 0;
background-color: rgb(226, 232, 245);
}
.box {
position: absolute;
top: calc(50% - 150px);
left: calc(50% - 100px);
transform: perspective(1000px) rotateY(-45deg);
width: 200px;
height: 300px;
transform-style: preserve-3d;
}
.box:before {
content: "";
position: absolute;
bottom: -100px;
left: 0;
width: 100%;
height: 50px;
background: #222;
filter: blur(40px);
opacity: 0.5;
transform: rotateX(90deg);
}
.box div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform-style: preserve-3d;
animation: animate 5s linear infinite;
}
.box div span {
position: absolute;
top: 0;
left: 0;
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
padding: 30px;
background:linear-gradient(-45deg, #eef4ff, #eef1f7);
border-radius: 20px;
font-size: 4rem;
}
.box div span i {
position: absolute;
}
.box div span i:nth-child(2) {
bottom: 30px;
transform: rotateX(180deg);
}
.box div span:nth-child(1) {
color: #063f70;
transform: rotateX(0deg);
}
.box div span:nth-child(2) {
color: #e21b1b;
transform: rotateX(45deg);
}
.box div span:nth-child(3) {
color: #D74C3C;
transform: rotateX(-45deg);
}
.box div span:nth-child(4) {
color: #3c9df3;
transform: rotateX(90deg);
}
@keyframes animate {
0% {
transform: perspective(1000px) rotateX(0deg);
}
100% {
transform: perspective(1000px) rotateX(359deg);
}
}
Post a Comment