Assuming you are referring to creating a tiltable element using JavaScript, here is a simple example using HTML, CSS, and JavaScript, follow these steps.
1. Create an HTML file and include a basic structure with a head and body tag. You can use the following code as a starting point and Add the CSS and JavaScript files to your HTML document.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>How to Create Titlable 3d Element Using js</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<script src="script.js"></script>
</body>
</html>2. Inside the body tag, create a div element with a class of "box".
<div class="box">
<h5>Welcome to</h5>
<h1>CodeWithAr</h1>
<div class="balls">
<span></span>
<span></span>
<span></span>
</div>
</div>3. Create a CSS file and style your Tiltable to make it look nice. You can use the following code as a starting point:
body {
height: 92vh;
display: flex;
align-items: center;
justify-content: center;
font-family: system-ui;
}
.box {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 35rem;
height: 20em;
background: linear-gradient(45deg, #3acbff, #2100ff);
border-radius: 8px;
box-shadow: 0 19px 38px #0000004d, 0 15px 12px rgba(0, 0, 0, 0.22);
transition: all 200ms ease-out;
color: #fff;
}
h5 {
margin-right: 5px;
color: #ff0;
}
h1 {
font-size: 1.9rem;
font-weight: 500;
text-shadow: 0 0 22px #0003;
transform: translateZ(50px);
}
.balls {
position: absolute;
bottom: 1.5rem;
right: 2rem;
}
.balls span {
display: inline-flex;
width: 0.8rem;
height: 0.8rem;
margin: 0 0.1rem;
border-radius: 25px;
background: #f00;
box-shadow: 0 0 22px rgba(0, 0, 0, 0.7);
transform: translateZ(50px);
}
.balls span:nth-child(2) {
background: #0f0;
}
.balls span:nth-child(3) {
background: #ff0;
}
.cross {
position: absolute;
top: 0.8rem;
right: 1.8rem;
font-size: 2.3rem;
font-weight: 700;
color: #fff;
text-shadow: 0 0 22px rgba(0, 0, 0, 0.7);
transform: translateZ(50px) rotate(45deg);
}4. Create a JS file. You can use the following code as a starting point:
const box = document.querySelector('.box')
const boxRect = box.getBoundingClientRect()
box.addEventListener('mousemove', function (event) {
const xPos = (event.clientX - boxRect.left) / boxRect.width
const xOffset = -(xPos - 0.5)
const dxNorm = Math.min(Math.max(xOffset, -0.5), 0.5)
const yPos = (event.clientY - boxRect.top) / boxRect.height - 0.5
box.style.transform =
`perspective(1000px) rotateY(${dxNorm * 45}deg) rotateX(${yPos * 45}deg) `
})
box.addEventListener('mouseleave', function () {
box.style.transform = 'none'
})5. Save the file and open it in a web browser to see your 3D Tiltable.
In this example, the element with the ID "tiltable-element" is initially styled with a gray background color and a width and height of 200 pixels. When the user hovers over the element, the CSS transform property is used to rotate the element by 5 degrees.
The JavaScript code listens for mouse movement events on the tiltable element using the mousemove event listener. It calculates the position of the mouse relative to the center of the element and uses this to determine the amount of rotation to apply to the element using the CSS transform property.
When the mouse leaves the element, the JavaScript code resets the element's transform property to its initial value, effectively canceling any rotation.
<div class="box">
<h5>Welcome to</h5>
<h1>CodeWithAr</h1>
<div class="balls">
<span></span>
<span></span>
<span></span>
</div>
</div>
body {
height: 92vh;
display: flex;
align-items: center;
justify-content: center;
font-family: system-ui;
}
.box {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 35rem;
height: 20em;
background: linear-gradient(45deg, #3acbff, #2100ff);
border-radius: 8px;
box-shadow: 0 19px 38px #0000004d, 0 15px 12px rgba(0, 0, 0, 0.22);
transition: all 200ms ease-out;
color: #fff;
}
h5 {
margin-right: 5px;
color: #ff0;
}
h1 {
font-size: 1.9rem;
font-weight: 500;
text-shadow: 0 0 22px #0003;
transform: translateZ(50px);
}
.balls {
position: absolute;
bottom: 1.5rem;
right: 2rem;
}
.balls span {
display: inline-flex;
width: 0.8rem;
height: 0.8rem;
margin: 0 0.1rem;
border-radius: 25px;
background: #f00;
box-shadow: 0 0 22px rgba(0, 0, 0, 0.7);
transform: translateZ(50px);
}
.balls span:nth-child(2) {
background: #0f0;
}
.balls span:nth-child(3) {
background: #ff0;
}
.cross {
position: absolute;
top: 0.8rem;
right: 1.8rem;
font-size: 2.3rem;
font-weight: 700;
color: #fff;
text-shadow: 0 0 22px rgba(0, 0, 0, 0.7);
transform: translateZ(50px) rotate(45deg);
}
const box = document.querySelector('.box')
const boxRect = box.getBoundingClientRect()
box.addEventListener('mousemove', function (event) {
const xPos = (event.clientX - boxRect.left) / boxRect.width
const xOffset = -(xPos - 0.5)
const dxNorm = Math.min(Math.max(xOffset, -0.5), 0.5)
const yPos = (event.clientY - boxRect.top) / boxRect.height - 0.5
box.style.transform =
`perspective(1000px) rotateY(${dxNorm * 45}deg) rotateX(${yPos * 45 -100}deg) `
})
box.addEventListener('mouseleave', function () {
box.style.transform = 'none'
})