HTML动画XYZ轴的用法详解

最新推荐文章于 2024-06-25 11:27:33 发布

尹蓝锐

最新推荐文章于 2024-06-25 11:27:33 发布

阅读量5.4k

点赞数

分类专栏：前端HTML 文章标签： html 动画 css3

本文链接：https://blog.csdn.net/weixin_52249641/article/details/121259342

版权

前端HTML 专栏收录该内容

18 篇文章 1 订阅

订阅专栏

HTML动画XYZ轴的用法详解

我将通过创建一个旋转的正方体讲解H5 xyz轴的具体用法

首先定义一个盒子,盒子内先放一张平面(后面会根据这张平面弄
出六个面使其成为一个正方体)

复制并打开代码你会看到一个正方体在旋转,不要着急,马上带你分析代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    @keyframes zhuan {
        from{
            transform: rotateY(0);
        }
        50%{
            transform: rotateY(190deg) rotateX(45deg);
        }
        to{
            transform: rotateY(360deg);
        }
    }

    #box{
        position: relative;
        width: 300px;
        height: 300px;
        /*border: 1px red solid ;*/
        text-align: center;
        margin: 100px auto 0;
        font-size: 100px;
        line-height: 300px;
        transform-style: preserve-3d;
        animation: zhuan 5s linear infinite;
    }
    #box>div{
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        right: 0;
    }
    #box>div:nth-child(1){background: yellow;transform: translateZ(150px)}
    #box>div:nth-child(2){background: lightgreen; transform: translateZ(-150px) rotateY(180deg)}
    #box>div:nth-child(3){background: lightcoral;transform: rotateY(90deg) translateZ(150px)}
    #box>div:nth-child(4){background: lightblue;transform: rotateY(-90deg) translateZ(150px)}
    #box>div:nth-child(5){background: lightgoldenrodyellow;transform:rotateX(-90deg) translateZ(-150px) rotateY(180deg)}
    #box>div:nth-child(6){background: lightgrey;transform: rotateY(-180deg) translateY(150px) rotateX(-90deg) rotateZ(180deg)}





</style>
<body>
<div id="box">
    <div>前</div>
    <div>后</div>
    <div>右</div>
    <div>左</div>
    <div>上</div>
    <div>下</div>
</div>


</body>
</html>

我的思路是这样的…

1.创建一个盒子

要给这个盒子中要插入很多div标签,每个div标签都要是一个平面,
用来组成这个正方体。所以要给大盒子中设置一些共有属性,并且
必须在盒子中打开3d开关,否则实现不了3d的旋转

对应代码:

  #box{
        position: relative;
        width: 300px;
        height: 300px;
        /*border: 1px red solid ;*/
        text-align: center;
        margin: 100px auto 0;
        font-size: 100px;
        line-height: 300px;
        transform-style: preserve-3d;
        animation: zhuan 5s linear infinite;
    }
    #box>div{
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        right: 0;
    }

2.设置旋转

为什么要设置旋转呢?因为我要通过旋转来调试我得接下来操作
xyz轴是否正确,也就是每个面是否到了应该去的位置(就跟拼拼图
类似)。通过旋转我能观察到我的正方体成型情况,以方便进行修
改代码。

对应代码:

    @keyframes zhuan {
        from{
            transform: rotateY(0);
        }
        50%{
            transform: rotateY(190deg) rotateX(45deg);
        }
        to{
            transform: rotateY(360deg);
        }
    }

3.开始"拨弄"XYZ轴,将每个div对应的面拼出一个正方体

先看代码吧

#box>div:nth-child(1){background: yellow;transform: translateZ(150px)}
#box>div:nth-child(2){background: lightgreen; transform: translateZ(-150px) rotateY(180deg)}
#box>div:nth-child(3){background: lightcoral;transform: rotateY(90deg) translateZ(150px)}
#box>div:nth-child(4){background: lightblue;transform: rotateY(-90deg) translateZ(150px)}
#box>div:nth-child(5){background: lightgoldenrodyellow;transform:rotateX(-90deg) translateZ(-150px) rotateY(180deg)}
#box>div:nth-child(6){background: lightgrey;transform: rotateY(-180deg) translateY(150px) rotateX(-90deg) rotateZ(180deg)}

看完代码是不是很萌币?再明确一个点,那就是只设置子代1时带红框的白色面(也就是下面的蓝色面)其实是最初始的位置,6个面的位置上都是根据这个原始面进行调整位置的,xyz轴的布局如下。

在这里插入图片描述

只设置子代1:
在这里插入图片描述
为了观察设置了旋转,我们能看出黄色面与原始面产生了一块距离,用到的属性transform: translateZ(150px)是在结合xyz轴看一下,黄色面果然是根据Z轴远离的,同理,后页面可与前页面类似。
这时候你可能会问，前后的页面解决了，那上下和左右怎么办？其实和简单，通过rotate属性将页面设置旋转就可以了，再配合移动就可实现这么一个正方体了，后面的交给你们了，弄会了这个正方体，关于xyz轴的旋转应该就不是问题了。

尹蓝锐

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML动画XYZ轴的用法详解

HTML动画XYZ轴的用法详解我将通过创建一个旋转的正方体讲解H5 xyz轴的具体用法首先定义一个盒子,盒子内先放一张平面(后面会根据这张平面弄出六个面使其成为一个正方体)复制并打开代码你会看到一个正方体在旋转,不要着急,马上带你分析代码。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title>&l
复制链接

扫一扫