I'm trying to create a clock design and add a 3d drag according to the mouse movement view just like this
pen[
^]
Although the above pen uses a library called Zdog, I also tried to add it in my code but I didn't find my way.
I have a front view and a back view in my clock's design front side consist an image and seconds, hours, minutes to look like a clock. I want the front side to be shown as default and as the movement of mouse the backside to be shown in a 3d way just like the above pen.
My Code
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Clock Design</title>
<link rel="stylesheet" href="clock.css">
</head>
<style>
* {
box-sizing: border-box;
padding: 0;
margin: 0
}
body {
display: flex;
justify-content: center;
align-items: center;
background: orange;
}
.clock {
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
height:280px;
min-width: 279px;
background:url('https://i.imgur.com/jTq94k2.png') #FBC000;
background-size: cover;
border-radius: 50%;
box-shadow: inset rgba(0, 0, 0, 0.3) 0px 30px 45px,
rgba(0, 0, 0, 0.2) 1px 22px 18px;
border:22px solid #FBD309;
overflow: hidden;
}
.clock-back{
height:280px;
width:278px;
background:url('https://i.imgur.com/8rMtgzY.png') #FBC000;
background-size: 100%;
background-position: center;
background-size: contain;
border-radius: 50%;
box-shadow: inset rgba(0, 0, 0, 0.3) 0px 30px 45px,
rgba(0, 0, 0, 0.2) 1px 22px 18px;
border:22px solid #FBD309;
overflow: hidden;
}
.clock::before{
content:'';
position: absolute;;
width: 11px;
height:11px;
background:#42a5f5;
border-radius: 50%;
z-index: 10;
box-shadow: inset rgba(0, 0, 0, 0.3) 0px 30px 45px;
}
.hour, .minute, .second{
position: absolute;
}
.hour, .hr{
box-shadow: rgba(0, 0, 0, 0.2) 0px 30px 45px;
height: 101px;
width:101px;
justify-content: center;
display: flex;
}
.hr::before{
content:'';
position: absolute;
width:7px;
height:51px;
background: black;
border-radius: 6px 6px 0 0;
}
.minute, .min{
height: 120px;
width:120px;
justify-content: center;
display: flex;
}
.min::before{
content:'';
position: absolute;
width:5px;
height:66px;
background: blue;
border-radius: 6px 6px 0 0;
}
.second, .sec{
height: 151px;
width:151px;
justify-content: center;
display: flex;
}
.sec::before{
content:'';
position: absolute;
width:1px;
height:100px;
background: red;
border-radius: 6px 6px 0 0;
}
</style>
<body>
<div class="clock front">
<div class="hour">
<div class="hr"></div>
</div>
<div class="minute">
<div class="min"></div>
</div>
<div class="second">
<div class="sec"></div>
</div>
</div>
<div class="clock-back">
</div>
</body>
<script>
const hr = document.querySelector('.hr');
const min = document.querySelector('.min');
const sec = document.querySelector('.sec');
setInterval(()=>{
let today= new Date();
let hours = today.getHours()*30;
let mins = today.getMinutes()*6;
let secs = today.getSeconds()*6;
hr.style.transform = `rotateZ(${hours+(mins/12)}deg)`;
min.style.transform = `rotateZ(${mins}deg)`;
sec.style.transform = `rotateZ(${secs}deg)`;
})
</script>
</html>
What I have tried:
I've been exploring the Zdog library, but I'm struggling to adapt the existing code to use Zdog for the 3d view. I've tried creating Zdog shapes for the clock front and back, as well as for the hour, minute, and second hands, but I didn't find my way again. Is there any other way for this to work ?.
Any help or Suggestion will be great and appreciated. Thank you !.
Submit an article or tip