js做一个球体时钟

最新推荐文章于 2024-10-02 05:39:15 发布

写代码的小陈

最新推荐文章于 2024-10-02 05:39:15 发布

阅读量120

点赞数

文章标签： javascript css css3

本文链接：https://blog.csdn.net/c535643152/article/details/129936888

版权

本文展示了如何使用JavaScript和CSS3技术实现一个创新的3D球体时钟效果。通过HTML结构定义钟面，JavaScript处理时间更新和动画效果，CSS3用于样式和3D变换，成功地将传统时钟形式转化为独特的视觉体验。

摘要由CSDN通过智能技术生成

效果如图实现了一个球体时钟

html部分代码如下

<!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>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .label{
            /* position: absolute; */
            /* background-color: aqua; */
            width: 50px;
            line-height: 50px;
            text-align: center;
            transition:transform  4s  linear;
            /* backface-visibility: hidden; */

            
            
        }
        #a1{
            width: 50px;
            height: 50px;
            /* display: flex; */
            /* flex-wrap: wrap; */
            margin: 20% auto;
            perspective:5000px;
            padding: 50px;
            /* 开启3D */
            transform-style: preserve-3d;
            /* border: 2px solid #000; */
            position: relative;
            transition: all 2s  linear;
            /* transform: rotateX(80deg) rotateY(20DEG) ; */
            /* transform:translatez(-800px);  */
            /* -ms-transform-origin-x: 50%;
            -ms-transform-origin-y: 50%;
            -ms-transform-origin-z: 50%; */
        }
        #a1:hover{
            /* transform: rotate3D(-1,-1,0,360deg); */
            /* transform: rotateX(90deg); */
        }
        .a1{
            width: 200px;
            height: 200px;  
            top: -25px;
            left: -25px;
            position: absolute;  
            /* background-color: aqua; */
            transform:translateZ(100px) ;
            backface-visibility: hidden;
        }
        .a2{
            width: 200px;
            height: 200px;
            top: -25px;
            left: -25px;  
            position: absolute;  
            /* background-color: red; */
            transform: rotatex(-90deg) rotateY(90deg) translate(100PX);
            transform-origin: right;
            backface-visibility: hidden;
        }
        .a3{
            width: 200px;
            height: 200px; 
            top: -25px;
            left: -25px; 
            position: absolute;  
            /* background-color: yellow; */
            transform:translateZ(-100px) rotatex(180DEG);
            backface-visibility: hidden;

        }
        .a4{
            width: 200px;
            height: 200px;  
            top: -25px;
            left: -25px;
            position: absolute;  
            /* background-color: green; */
            transform: rotatex(-90deg) translateY(-100px) rotateY(180DEG);
            transform-origin: top;
            backface-visibility: hidden;
        }
        .a5{
            width: 200px;
            height: 200px;  
            top: -25px;
            left: -25px;
            position: absolute;  
            /* background-color: black; */
            transform: rotatex(-90deg) translateY(100PX) ;
            transform-origin: bottom;
            backface-visibility: hidden;
        }
        .a6{
            width: 200px;
            height: 200px;  
            top: -25px;
            left: -25px;
            position: absolute;  
            /* background-color: indigo; */
            transform: rotatex(-90deg) rotateY(-90deg) translateX(-100px);
            transform-origin: left;
            backface-visibility: hidden;
        }
    </style>
</head>
<body style="background: url(https://img-qn-4.51miz.com/preview/element/00/01/25/47/E-1254733-62876D77.jpg!/quality/90/unsharp/true/compress/true/format/jpg/fh/230);background-size: 100%;">
    <