Click here to Skip to main content
15,844,477 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
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
<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>

</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 !.
Posted
Updated 24-Nov-23 7:55am
v2
Comments
Amarnath S 24-Nov-23 7:31am    
You code does not have any Zdog library references in the JavaScript part. You need to show what you've tried using Zdog, and where is it failing, with specific error description.

1 solution

This is unfortunately the issue if you copy and paste someone elses code without reading the documentation or understanding how an add-in should work. As per the comments, you had no reference to teh 'Zdog' library.

Looking at their documentation, the first part states -
Quote:
Zdog is rendered on a 'canvas' or 'svg' element. Set width and height attributes to set the size.
, which you do not have in your code -
HTML
<canvas class="zdog-canvas" width="240" height="240"></canvas>


To reference the library -
JavaScript
<script src="https://unpkg.com/zdog@1/dist/zdog.dist.min.js"></script>
<script src="zdog-demo.js"></script>


I would suggest that you read the documentation first to achieve what you want to do - Zdog | Getting started | Tutorial[^]
 
Share this answer
 

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900