CSS3--利用transform属性制作时钟效果

最新推荐文章于 2024-07-24 15:57:11 发布

Wendy-lxq

最新推荐文章于 2024-07-24 15:57:11 发布

阅读量6.1k

点赞数 2

分类专栏： CSS & CSS3 文章标签： css3 transform

本文链接：https://blog.csdn.net/u010297791/article/details/54340553

版权

这篇博客介绍了如何利用CSS3的transform属性来制作一个动态时钟效果。通过rotate()、skew()、scale()和translate()等方法，结合时间的计算，实现了时针、分针和秒针的转动。并提到了transform执行顺序和transform-origin的重要性，以及使用setInterval()函数实现实时更新时间，达到时钟动态显示的目的。

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

首先简单总结一下transform这个属性，transform的含义是：改变，使…变形；转换。

transform的常用属性：
1）rotate() 旋转函数取值度数
deg 度数
Transform-origin 旋转的基点
2）skew() 倾斜函数取值度数
skewX()
skewY()
3）scale() 缩放函数取值正数、负数和小数
scaleX()
scaleY()
4）translate() 位移函数
translateX()
translateY()

注意：Transform 执行顺序问题 — 后写先执行。

案例说明：

实现代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>时钟</title>
    <style id="css">
        ul,li{
            padding: 0;
            margin: 0;
            list-style: none;
        }