Simple Interactive 3D Cube

Developer
Rodrigo Hernando
Size
2,985 Kb
Views
28,336
  1. Simple Interactive 3D Cube Previews
  2. Simple Interactive 3D Cube HTML Codes
  3. Simple Interactive 3D Cube CSS Codes
  4. Simple Interactive 3D Cube JS Codes

How do I make an simple interactive 3d cube?

Greensock forums:http://forums.greensock.com/topic/8228-transition-of-3d-cube/. What is a simple interactive 3d cube? How do you make a simple interactive 3d cube? This script and codes were developed by Rodrigo Hernando on 18 November 2022, Friday.

Simple Interactive 3D Cube Previews
IQ Test

Simple Interactive 3D Cube - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Simple Interactive 3D Cube</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="css/style.css">
</head>
<body> <p> <button id="btn7">Tween Faces</button> <button id="btn8">Rotate Parent</button> <div> <button id="btn1">front face</button> <button id="btn2">right face</button> <button id="btn3">back face</button> <button id="btn4">left face</button> <button id="btn5">top face</button> <button id="btn6">bottom face</button> </div>
</p>
<div class="container"> <div id="cubeParent"> <div class="cubeFace" id="face1"></div> <div class="cubeFace" id="face2"></div> <div class="cubeFace" id="face3"></div> <div class="cubeFace" id="face4"></div> <div class="cubeFace" id="face5"></div> <div class="cubeFace" id="face6"></div> </div>
</div>
<div class="container" style="margin-left:300px; margin-top:-200px;"> <div id="cubeParent"> <div class="cubeFace1" id="face1" style="background:url('https://s.cdpn.io/33073/1-150x150.jpg')"></div> <div class="cubeFace1" id="face2" style="background:url('https://s.cdpn.io/33073/2-150x150.jpg')"></div> <div class="cubeFace1" id="face3" style="background:url('https://s.cdpn.io/33073/3-150x150.jpg')"></div> <div class="cubeFace1" id="face4" style="background:url('https://s.cdpn.io/33073/4-150x150.jpg')"></div> <div class="cubeFace1" id="face5" style="background:url('https://s.cdpn.io/33073/5-150x150.jpg')"></div> <div class="cubeFace1" id="face6" style="background:url('https://s.cdpn.io/33073/6-150x150.jpg')"></div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Simple Interactive 3D Cube - Script Codes CSS Codes

html
{ height:100%;
}
body
{	margin:0; padding:0; background : -webkit-linear-gradient(top, rgb(0, 0, 0) 00%, rgb(200, 200, 200) 100%); background : -moz-linear-gradient(top, rgb(0, 0, 0) 00%, rgb(200, 200, 200) 100%); background : -o-linear-gradient(top, rgb(0, 0, 0) 00%, rgb(200, 200, 200) 100%); background : -ms-linear-gradient(top, rgb(0, 0, 0) 00%, rgb(200, 200, 200) 100%); background : -linear-gradient(top, rgb(0, 0, 0) 00%, rgb(200, 200, 200) 100%); background-repeat: no-repeat; background-attachment: fixed;
}
.container { border: 1px solid black;	margin:50px;	background:#ccc;	width:150px;
}
#cubeParent{	height:150px;	width:150px;	position:relative;
}
.cubeFace, .cubeFace1{	height:150px;	width:150px;	position:absolute;
}
#face1{	background:#00F;
}
#face2{	background:#f0f;
}
#face3{	background:#063;
}
#face4{	background:#c00;
}
#face5{	background:#f60;
}
#face6{	background:#ff0;
}
.carItem{	position:absolute;	width:85px;	height:113px;
}
#rotPlane{	width:200px;	height:200px;	background:#00f;	position:relative;	color:#FFF;
}
button
{ padding:5px 10px; margin:10px; border-radius:5px; background : -webkit-linear-gradient(top, rgb(255, 255, 255) 0%, rgb(200, 200, 200) 100%);	background : -moz-linear-gradient(top, rgb(255, 255, 255) 0%, rgb(200, 200, 200) 100%);	background : -o-linear-gradient(top, rgb(255, 255, 255) 0%, rgb(200, 200, 200) 100%);	background : -ms-linear-gradient(top, rgb(255, 255, 255) 0%, rgb(200, 200, 200) 100%);	background : -linear-gradient(top, rgb(255, 255, 255) 0%, rgb(200, 200, 200) 100%); border:1px solid #646464;
}
button:hover
{ background : -webkit-linear-gradient(top, rgb(200, 200, 200) 0%, rgb(255, 255, 255) 100%);	background : -moz-linear-gradient(top, rgb(200, 200, 200) 0%, rgb(255, 255, 255) 100%);	background : -o-linear-gradient(top, rgb(200, 200, 200) 0%, rgb(255, 255, 255) 100%);	background : -ms-linear-gradient(top, rgb(200, 200, 200) 0%, rgb(255, 255, 255) 100%);	background : -linear-gradient(top, rgb(200, 200, 200) 0%, rgb(255, 255, 255) 100%);
}
button:active
{ position:relative;	top:1px;
}

Simple Interactive 3D Cube - Script Codes JS Codes

var tl3 = new TimelineMax({paused:true}),	tl4 = new TimelineMax({paused:true}),	face1 =$("div#face1"),	face2 =$("div#face2"),	face3 =$("div#face3"),	face4 =$("div#face4"),	face5 =$("div#face5"),	face6 =$("div#face6"),	cubeParent = $("div#cubeParent"),	btn1 = $("button#btn1"),	btn2 = $("button#btn2"),	btn3 = $("button#btn3"),	btn4 = $("button#btn4"),	btn5 = $("button#btn5"),	btn6 = $("button#btn6"),	btn7 = $("button#btn7"),	btn8 = $("button#btn8");
TweenMax.set($("div.container"), {perspective:500});
TweenLite.set(cubeParent, {transformStyle:"preserve-3d"});
tl3	.to(cubeParent, .5, {z:'-=75'})	.to($("div.cubeFace"), .5, {autoAlpha:0.5})	.to(face1, .5, {rotationY:90, x:-75})	.to(face2, .5, {rotationX:90, y:-75}, '1')	.to(face3, .5, {rotationX:90, y:75}, '1')	.to(face4, .5, {rotationY:90, x:75}, '1')	.to(face5, .5, {z:75}, '1')	.to(face6, .5, {z:-75}, '1');
tl4	.to(cubeParent, 5, {rotationY:720})	.to(cubeParent, 2, {rotationX:360}, "-=2.5")	.to(cubeParent, 1, {rotationY:-360, rotationX:0});
btn7.click(function()
{	tl3.play(0);	console.log(cubeParent[0]._gsTransform);
});
btn8.click(function()
{	tl4.play(0);
});
btn1.click(function()//front face
{	if(cubeParent[0]._gsTransform.rotationX != 0)	{	TweenMax.to(cubeParent, 1, {rotationX:'0_short'});	TweenMax.to(cubeParent, 1, {rotationY:'0_short'});	TweenMax.to(cubeParent, 1, {rotation:'0_short'});	}	else	{	TweenMax.to(cubeParent, 1, {rotationY:'0_short'});	TweenMax.to(cubeParent, 1, {rotation:'0_short'});	}
});
btn2.click(function()//right face
{	if(cubeParent[0]._gsTransform.rotationX != 0)	{	TweenMax.to(cubeParent, 1, {rotationX:'0_short'});	TweenMax.to(cubeParent, 1, {rotationY:'90_short'});	TweenMax.to(cubeParent, 1, {rotation:'0_short'});	}	else	{	TweenMax.to(cubeParent, 1, {rotationY:'90_short'});	TweenMax.to(cubeParent, 1, {rotation:'0_short'});	}
});
btn3.click(function()//back face
{	if(cubeParent[0]._gsTransform.rotationX != 0)	{	TweenMax.to(cubeParent, 1, {rotationX:'0_short'});	TweenMax.to(cubeParent, 1, {rotationY:'180_short'});	TweenMax.to(cubeParent, 1, {rotation:'0_short'});	}	else	{	TweenMax.to(cubeParent, 1, {rotationY:'180_short'});	TweenMax.to(cubeParent, 1, {rotation:'0_short'});	}
});
btn4.click(function()//left face
{	if(cubeParent[0]._gsTransform.rotationX != 0)	{	TweenMax.to(cubeParent, 1, {rotationX:'0_short'});	TweenMax.to(cubeParent, 1, {rotationY:'270_short'});	TweenMax.to(cubeParent, 1, {rotation:'0_short'});	}	else	{	TweenMax.to(cubeParent, 1, {rotationY:'270_short'});	TweenMax.to(cubeParent, 1, {rotation:'0_short'});	}
});
btn5.click(function()//top face
{	if(cubeParent[0]._gsTransform.rotationY != 0)	{	TweenMax.to(cubeParent, 1, {rotationY:'0_short'});	TweenMax.to(cubeParent, 1, {rotationX:'-90_short'});	TweenMax.to(cubeParent, 1, {rotation:'0_short'});	}	else	{	TweenMax.to(cubeParent, 1, {rotationX:'-90_short'});	TweenMax.to(cubeParent, 1, {rotation:'0_short'});	}
});
btn6.click(function()//bottom face
{	if(cubeParent[0]._gsTransform.rotationY != 0)	{	TweenMax.to(cubeParent, 1, {rotationY:'0_short'});	TweenMax.to(cubeParent, 1, {rotationX:'90_short'});	TweenMax.to(cubeParent, 1, {rotation:'180_short'});	}	else	{	TweenMax.to(cubeParent, 1, {rotationX:'90_short'});	TweenMax.to(cubeParent, 1, {rotation:'180_short'});	}
});
Simple Interactive 3D Cube - Script Codes
Simple Interactive 3D Cube - Script Codes
Home Page Home
Developer Rodrigo Hernando
Username rhernando
Uploaded November 18, 2022
Rating 3.5
Size 2,985 Kb
Views 28,336
Do you need developer help for Simple Interactive 3D Cube?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Rodrigo Hernando (rhernando) Script Codes
Name
Update tween progress with Draggable
Bezier Animation with straight paths
Auto scroll to element offset 2
GSAP Scramble Text Plugin
Spinning Images
Circular Progress Bar
Draggable add element
Simple scroll controlled animation
Auto scroll to element offset
Cross-Browser Flip Card
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!