Create 360 Degree (3D) Product View Website Using HTML
(3D) Product View
Learn how to make a Website which 3D (360deg Rotation) Products view Using HTML, CSS, And JavaScript. Easy Way to Create a 3D Website in HTML. You will easily create this 3D website by watching my video tutorial or by following the steps which I have given below.
How To Make 360 Degree (3D) Product View Website Using HTML, CSS and JS.
- 0.0 - 1.00 min : Intro
- 1.00 - 26.0 min: Creating 360 Degree (3D) Product View Website Using HTML
About This Tutorial
In this tutorial, I will teach how to make a website that gives the 3D view of your product. It is easy to make and use in the projects. You follow my video tutorial for making this Awesome site. In this tutorial, First 60s, I show the template, which I create in this video after I start to make the design. I use images to make this car 3D. You will get these images on google. I hope you like my tutorial. If you have any questions or problems in this tutorial, Contact me.
1) First You Create A Website Folder.
2) Create HTML And CSS File, And Put This File In The Website Folder.
3) Link CSS File With HTML
4) Link 360deg.js File With HTML. Link in the source code.
5) Copy HTML Code Which I Given Below And Past In Your HTML File.
<!--doctype html--> <html> <head> <meta charset="utf-8"> <title>3D Rotation Website</title> <link rel="stylesheet" href="css/style.css"/> </head> <body> <div class="navigation"> <div class="left"> <select> <option value="shop">SHOP</option> <option value="sale">SALE</option> </select> <div class="menu"><a href="#"><img src="images/bars.png"></a></div> </div> <div class="right"> <a href="#">ACCOUNT</a> </div> <div class="logo"><a href="#"><img src="images/lgo.png"></a></div> </div> <!--navigation-End--> <div class="content-container"> <div class="img-container"> <a href="#" onClick="document.getElementById('modal-wrapper').style.display='block'"><img src="images/CAR.png"></a> <button onClick="document.getElementById('modal-wrapper').style.display='block'" ><font style="font-weight:bold">3D</font> View</button> </div> <div class="text-container"> <h1><font color="#f44e52">911</font> Racing Car Porsche</h1> <p>911 racing car powerd by porsche.This is a beautifull racing car and super fast speed</p> <a href="#" class="price">$18200</a> <div class="cart"> <select> <option value="q1">1</option> <option value="q2">2</option> <option value="q3">3</option> </select> <a href="#">ADD TO CART</a> </div> </div> </div> <!--3d modal--> <div id="modal-wrapper" class="modal"> <div class="center"> <span onClick="document.getElementById('modal-wrapper').style.display='none'" class="close">×</span> <div class="rotation"> <img src="images/360/2.png"> <img src="images/360/3.png"> <img src="images/360/4.png"> <img src="images/360/5.png"> <img src="images/360/6.png"> <img src="images/360/7.png"> <img src="images/360/8.png"> <img src="images/360/9.png"> <img src="images/360/10.png"> <img src="images/360/11.png"> <img src="images/360/12.png"> <img src="images/360/13.png"> <img src="images/360/14.png"> <img src="images/360/15.png"> <img src="images/360/16.png"> <img src="images/360/17.png"> <img src="images/360/18.png"> <img src="images/360/19.png"> <img src="images/360/20.png"> <img src="images/360/21.png"> <img src="images/360/22.png"> <img src="images/360/23.png"> <img src="images/360/24.png"> <img src="images/360/25.png"> <img src="images/360/26.png"> <img src="images/360/27.png"> <img src="images/360/28.png"> <img src="images/360/29.png"> <img src="images/360/30.png"> <img src="images/360/31.png"> <img src="images/360/32.png"> <img src="images/360/33.png"> <img src="images/360/34.png"> <img src="images/360/35.png"> <img src="images/360/36.png"> <img src="images/360/37.png"> <img src="images/360/38.png"> <img src="images/360/39.png"> <img src="images/360/40.png"> <img src="images/360/41.png"> <img src="images/360/42.png"> <img src="images/360/43.png"> <img src="images/360/44.png"> <img src="images/360/45.png"> </div> </div> </div> <script src="js/360deg.js"></script> </body> </html>
6) Copy CSS Code Which I Given Below And Past In Your CSS File.
@charset "utf-8";
/* CSS Document */
body{
margin:0px;
padding:0px;
font-family:myriad pro;}
a{
text-decoration:none;}
ul{
list-style:none;}
.navigation{
margin:30px 20px;}
.menu {
height:13px;
margin:0px 20px;}
.menu img{
max-width:100%;
max-height:100%;}
.left{
display:flex;
float:left;
align-items:center;}
.left select{
margin:0px;
outline:none;
padding:13px 8px;
background-color:rgba(235,235,235,0.6);
font-size:11px;
font-weight:700;
border:none;}
.right{
float:right;
padding:10px 20px;
background-color:#f44c52;
border-radius:10px;}
.right a{
color:#fcfcfc;
font-weight:bold;
font-size:12px;}
.logo{
display:flex;
justify-content:center;}
.logo img{
height:40px;
}
.content-container{
position:relative;
display:flex;
align-items:center;
flex-direction:row-reverse;
justify-content:flex-end;
margin:80px;}
.img-container{
height:450px;
width:1027;
display:flex;
align-items:center;}
.img-container img{
max-height:100%;
max-width:100%;
}
.text-container{
display:flex;
margin-right:auto;
flex-direction:column;
flex-wrap:wrap;
width:600px;}
h1{
font-size:60px;
margin:0px;
padding:0px;
font-family:bebas kai;
letter-spacing:2px;
color:#262626;}
p{
color:#a8a1a1;
width:400px;}
.price{
color:#000000;
font-size:40px;
font-family:bebas kai;
text-shadow:2px 2px 12px rgba(128,128,128,0.3);}
.cart{
margin-top:10px;
position:absolute;
bottom:0px;}
.cart select{
padding:13px 35px;
border:1px solid rgba(176,176,176,1.00);
outline:none;}
.cart a{
color:#FFFFFF;
background-color:#f44e52;
text-decoration:none;
text-shadow:0px 2px 12px rgba(0,0,0,0.3);
padding:15px;
width:200px;
height:50px;
font-weight:200;
margin-left:20px;
border-radius:5px;}
.center{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:800px;}
.center img{
display:flex;
margin:auto;}
.modal{
display:none;
position:fixed;
z-index:1;
left:0;
top:0;
width:100%;
height:100%;
overflow:auto;
background-color:rgba(0,0,0,0.4);}
.close{
font-size:35px;
font-weight:bold;}
.close:hover,.close:focus{
color:red;
cursor:pointer;}
button{
background-color:#f44e52;
box-shadow:0px 2px 12px rgba(0,0,0,0.4);
text-shadow:0px 2px 12px rgba(0,0,0,0.6);
color:white;
padding:14px 20px;
margin:8px 26px;
border-radius:10px;
border:none;
cursor:pointer;
width:200px;
font-size:20px;
position:absolute;
bottom:0px;
left:70%;
transform:translateX(-70%);
}
button:hover{
opacity:0.8;}
7) All Files link, Which I use in the project given below.
The Download Links Will Be Shown in 30 Seconds
Comments