I'm trying to create a clock design and add a 3d drag according to the mouse movement view just like this pen
text
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;
}
/* the front should show by default */
.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;
}
/* the back face */
.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>
<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>
</body>
</html>
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!
You have had a really good progress so far, but I have never used Zdog for 3D, even it is a 3D JavaScript engine for <canvas> and SVG. For 3D WebGL Experiences, I have always used Three.js. It is just more suitable for complex and realistic 3D projects. You can see many demos on their website.
But, if you really want to use Zdog, you have to know how to work around it. For example, if you just want to create a circle in a 3D space, you have to write the following code...
You also have to define a canvas with the zdog-canvas class like so,
<canvas class="zdog-canvas"></canvas>. You also have to add the Zdog library the way mentioned in their docs from this link.If you want to make something with three.js, you have to be good in JavaScript and know your way around the library, as it is way more complicated than Zdog. You can take a look at this example from Irradiance's YouTube channel making a 3D clock using Three.js
You can see a lot of examples using Zdog on this codepen collection.. I, personally, have done something/s with three.js in the past and making a clock would be just a extra exercise for me. So, if you want to learn, then you have to do it by yourself no matter how long would it takes. If you have a client and deadline over your head, then I can help! Leave a comment below about you situation.