CSS3练习之时钟计时器，3D旋转

最新推荐文章于 2023-05-04 10:32:13 发布

原创最新推荐文章于 2023-05-04 10:32:13 发布 · 913 阅读

1 ·

CC 4.0 BY-SA版权

前端小实例专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一种使用HTML与CSS实现3D立方体轮转的效果及模拟时钟计时的方法。通过关键帧动画，立方体上的各个面能够实现平滑的3D轮转；同时，模拟时钟的指针也会随着时间的推移而转动。

1、时钟计时效果（计时器）
模拟时钟从00:00:00开始转动计时
这里写图片描述

clock.html

<!doctype html>
<html>
     <head>
            <meta charset="UTF-8">
            <meta name="Generator" content="EditPlus®">
            <meta name="Author" content="">
            <meta name="Keywords" content="">
            <meta name="Description" content="">
            <title>Document</title>
            <style>
                #clock{
                    width:176px;
                    height:176px;
                    border:2px solid black;
                    border-radius:50%;
                    position:relative;
                    background:url(images/content.jpg) no-repeat -213px -194px;
                }
                #hour{
                    width:8px;
                    height:50px;
                    background-color:black;
                    position:absolute;
                    top:38px;
                    left:84px;
                    transform-origin:bottom center;
                    animation:scroll 43200s linear infinite;
                    animation-fill-mode:backwards;
                }
                #min{
                    width:4px;
                    height:70px;
                    background-color:black;
                    position:absolute;
                    top:18px;
                    left:86px;
                    transform-origin:bottom center;
                    animation:scroll 3600s linear infinite;
                    animation-fill-mode:backwards;
                }
                #sec{
                    width:2px;
                    height:82px;
                    background-color:black;
                    position:absolute;
                    top:6px;
                    left:87px;
                    transform-origin:bottom center;
                    animation:scroll 60s linear infinite;
                    animation-fill-mode:backwards;
                }
                @keyframes scroll{
                    0%{
                        transform:rotate(odeg);
                    }
                    100%{
                        transform:rotate(360deg);
                    }
                }
            </style>
     </head>
     <body>
        <div id="clock">
            <div id="hour"></div>
            <div id="min"></div>
            <div id="sec"></div>
        </div>
     </body>
</html>

图片3d轮转
这里写图片描述

sixsquier.html

<!doctype html>
<html>
    <head>
        <title>Insert your title</title>
        <meta charset="utf-8">
        <style>
            #stage{
                perspective:1000px;
                -webkit-perspective:1000px;
            }
            #parent{
                width:800px;
                height:400px;
                margin:100px auto;
                /*相对定位*/
                position:relative;
                transform:rotatex(-20deg) rotatey(0deg);
                /*指定子元素位置摆放形式*/
                transform-style:preserve-3d;
                transform-origin:center center;
                animation:scroll 6s linear infinite;
                animation-fill-mode:backwards;
            }
            #parent div{
                width:100px;
                height:100px;
                background-color:#e4393c;
                position:absolute;
                top:150px;
                left:350px;
            }
            #parent div:nth-child(1){
                transform:rotatey(0deg) translatez(200px);
            }
            #parent div:nth-child(2){
                transform:rotatey(60deg) translatez(200px);
            }
            #parent div:nth-child(3){
                transform:rotatey(120deg) translatez(200px);
            }
            #parent div:nth-child(4){
                transform:rotatey(180deg) translatez(200px);
            }
            #parent div:nth-child(5){
                transform:rotatey(240deg) translatez(200px);
            }
            #parent div:nth-child(6){
                transform:rotatey(300deg) translatez(200px);
            }
            @keyframes scroll{
                0%{
                    transform:rotatex(-20deg) rotatey(0deg);
                }
                100%{
                    transform:rotatex(-20deg) rotatey(360deg);
                }
            }
        </style>
    </head>
    <body>
        <div id="stage">
            <div id="parent">
                <div>1</div>
                <div>2</div>
                <div>3</div>
                <div>4</div>
                <div>5</div>
                <div>6</div>
            </div>
        </div>
    </body>
</html>