css3-手把手 transform 小时钟

学习css3ing，正在学习transfomr，突发奇想用此做个小时钟，开始吧：

准备前期工作，把时钟的表盘，时分秒针，实时时间标签的大概样子做好，效果如图：

html代码如下：

<div class="main">
        <div id="timeLabel"></div>
        <div id="hour"></div>
        <div id="minute"></div>
        <div id="second"></div>
    </div>

css 代码如下：

 1  <style>
 2         * {
 3             margin: 0;
 4             padding: 0;
 5         }
 6         .main {
 7             position: relative;
 8             margin: 100px auto;
 9             width: 300px;
10             height: 300px;
11             border-radius: 300px;
12             border: 1px solid #000;
13            box-shadow:2px 5px;
14         }
15         #timeLabel {
16             position: absolute;
17             background-color:pink;
18             width:100px;
19             height:30px;
20             left:100px;
21             top:180px;
22         }
23 
24         #hour {
25             width: 100px;
26             height: 10px;
27             background-color: red;
28             position:absolute;
29             left:150px;
30             top:145px;
31         }
32         #minute {
33             width:120px;
34             height:8px;
35             background-color:blue;
36             position:absolute;
37             left:150px;
38             top:146px;
39         }
40         #second {
41             width: 140px;
42             height: 4px;
43             background-color: green;
44             position: absolute;
45             left: 150px;
46             top: 148px;
47         }
48     </style>

　　2. 初始化默认时间，和表盘刻度，效果如下：

css3-手把手 transform 小时钟

更改后的css代码：

 <style>
        * {
            margin: 0;
            padding: 0;
        }

        .main {
            position: relative;
            margin: 100px auto;
            width: 300px;
            height: 300px;
            border-radius: 300px;
            border: 1px solid #000;
            box-shadow: 2px 5px #808080;
        }

        #timeLabel {
            position: absolute;
            background-color: pink;
            width: 80px;
            height: 25px;
            left: 110px;
            top: 180px;
            color: #fff;
            line-height: 25px;
            text-align: center;
        }

        #hour {
            width: 100px;
            height: 10px;
            background-color: red;
            position: absolute;
            left: 150px;
            top: 145px;
            transform-origin: 0 50%;
        }

        #minute {
            width: 120px;
            height: 8px;
            background-color: blue;
            position: absolute;
            left: 150px;
            top: 146px;
            transform-origin: 0 50%;
        }

        #second {
            width: 140px;
            height: 4px;
            background-color: green;
            position: absolute;
            left: 150px;
            top: 148px;
            transform-origin: 0 50%;
        }

        .hourPointer, .minuterPointer, .secondPointer {
            position: absolute;
            transform-origin: 0 50%;
        }
        .hourPointer {
            height: 10px;
            width: 12px;
            left: 150px;
            top: 145px;
            background-color: #f00;
            z-index:3;
        }
        .minuterPointer {
            height: 8px;
            width: 10px;
            left: 150px;
            top: 146px;
            background-color: #b6ff00;
            z-index: 2;
        }
        .secondPointer {
            height: 6px;
            width: 8px;
            left: 150px;
            top: 147px;
            background-color: #fa8;
            z-index: 1;
        }
    </style>

View Code