css动画钟表——transform之rotate

最新推荐文章于 2024-07-11 10:41:40 发布

易鸿莉

最新推荐文章于 2024-07-11 10:41:40 发布

阅读量1k

点赞数

分类专栏： html css 文章标签： html css css3 html5

本文链接：https://blog.csdn.net/weixin_43913877/article/details/110496591

版权

本文介绍了如何使用CSS的transform属性中的rotate功能来创建钟表，涉及css动画、变形、定位和布局。通过rotateZ()实现元素绕Z轴旋转，并探讨了使元素以端点为轴心旋转的两种方法。最后展示了如何构造时钟的HTML结构及CSS代码，实现时针、分针和秒针的动态显示。

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

css钟表——变形、旋转

今天学了个小玩意儿，用css写钟表
涉及知识点：css动画（animation）、变形（transform）、定位（position）、布局

一如既往先来看使时钟指针旋转的原理

旋转：顾名思义就使用css里面transform：rotate属性

rotateX（）：以X轴为旋转中心旋转
rotateY（）：以Y轴为旋转中心旋转
rotateZ（）：以Z轴为旋转中心旋转

浏览器默认的坐标系是以水平向右为X轴，竖直向下为Y轴，垂直于屏幕（网页）指向用户为Z轴
浏览器坐标系

使元素绕Z轴旋转，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>旋转</title>
    <style>
        *{
    
            margin: 0;
            padding: 0;
        }
        html,body{
    
            width: 100%;
            height: 100%;
        }
        body{
    
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .needle{
    
            width: 3px;
            height: 100px;
            background-color: red;
            animation: change 60s steps(60);
        }
        @keyframes change{
    
            from{
    
                transform: rotateZ(0deg);
            }
            to{
    
                transform: rotateZ(360deg);
            }
        }
    </style