如何用HTML写一个旋转万花筒

最新推荐文章于 2025-05-07 09:00:00 发布

橘橘子375

最新推荐文章于 2025-05-07 09:00:00 发布

阅读量683

点赞数 1

CC 4.0 BY-SA版权

文章标签： css3 html

本文链接：https://blog.csdn.net/qq_52756999/article/details/118438361

本文介绍如何利用CSS3的动画和旋转特性，创建一个可旋转的HTML万花筒。通过伪元素和后代选择器实现鼠标悬停时的动画效果，重点关注X、Y、Z轴的旋转及动画控制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述
一个简单的万花筒我们该怎么做，如何才能让他旋转起来，其实很简单。其中需要重点注意的是动画以及旋转。
其中我们调用了css3里边的伪元素hover：当鼠标悬停在元素上方时添加样式效果触发，我们调用hover元素使我们在把鼠标放到万花筒上时暂停该动画。

 .box:hover{
            animation-play-state: paused;/*动画暂停*/
        }

同时我们还用了后代选择器对图片进行位置的选择：

.box div{/*后代选择器*/
            position: absolute;
        }

在旋转中我们要注意X、Y、Z轴的使用，不同的轴会有不同的旋转效果。动画需要重点注意，动画与其他的元素都没有关联，所以我们必须把动画与其他元素做关联，因此我们在box的样式设置中调用动画名称。change是我们设置的动画名称。控制动画旋转的角度以及方向。

@keyframes change{
            0%{
                transform:rotateX(-10deg) rotateY(0deg);
            }
            100%{
                transform:rotateX(-10deg) rotateY(360deg);
            }
        }

以下是完整代码：

<!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>wanhuatong</title>
    <style>
        .box{
    
    
            width: 350px;
            height: 500px;
            /*background-color:blue;*/
            margin: 250px auto 0 auto;
            transform:rotateX(-10deg) rotateY(45deg