how to create tiltable 3d element using js

 

# To create a tiltable 3D element using JavaScript, you can use a combination of HTML, CSS, and JavaScript to create a 3D model and apply a tilt effect to it. Here's an example:

1. First, create a container element in HTML for the 3D model:

                
<div id="container"></div>
            

2. Next, add some CSS to create a 3D space and position the container in the center:

                
#container {
perspective: 1000px;
transform-style: preserve-3d;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 200px;
}
            

3. Use JavaScript to create a 3D cube element inside the container:

                
var container = document.getElementById('container');
var cube = document.createElement('div');
cube.classList.add('cube');
container.appendChild(cube);

for (var i = 1; i <= 6; i++) {
var face = document.createElement('div');
face.classList.add('face');
face.classList.add('face' + i);
cube.appendChild(face);
} 
            

4. Add some CSS to style the cube and its faces:

                    
.cube {
position: relative;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transform: translateZ(-100px);
}

.face {
position: absolute;
width: 200px;
height: 200px;
background: rgba(255, 255, 255, 0.5);
border: 1px solid black;
text-align: center;
line-height: 200px;
font-size: 24px;
font-weight: bold;
color: black;
transition: transform 0.5s ease;
}

.face1 {
transform: translateZ(100px);
}

.face2 {
transform: rotateY(180deg) translateZ(100px);
}

.face3 {
transform: rotateY(90deg) translateZ(100px);
}

.face4 {
transform: rotateY(-90deg) translateZ(100px);
}

.face5 {
transform: rotateX(-90deg) translateZ(100px);
}

.face6 {
transform: rotateX(90deg) translateZ(100px);
}
                

5. Finally, add some JavaScript to apply the tilt effect based on device orientation:

                    
window.addEventListener("deviceorientation", function(event) {
var beta = event.beta; // tilt in the front-to-back direction
var gamma = event.gamma; // tilt in the left-to-right direction

// Limit the tilt to between -30 and 30 degrees
beta = Math.min(Math.max(beta, -30), 30);
gamma = Math.min(Math.max(gamma, -30), 30);

// Apply the tilt to the cube
cube.style.transform = 'rotateX(' + (-beta) + 'deg) rotateY(' + gamma + 'deg)';
});

                

# tiltable 3d element in JavaScript HTML and CSS For Full Code 👇

 

Download Full Code

 

* In this example, we're using the `deviceorientation` event to detect changes in device orientation. We're then limiting the tilt to a range of -30 to 30 degrees and applying the tilt to the cube using the `transform` property in CSS.

* Note that this is a simplified example and you may need to adjust the code depending on your specific use case. Additionally, the `deviceorientation` event may not be available on all devices or browsers, so it's important to test your code thoroughly to ensure it works as expected.