CSS3-Animation旋转正方体

最新推荐文章于 2021-05-06 10:10:04 发布

_Clarity_

最新推荐文章于 2021-05-06 10:10:04 发布

阅读量197

点赞数

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

本文链接：https://blog.youkuaiyun.com/qq_43575703/article/details/105267329

版权

html 专栏收录该内容

17 篇文章

订阅专栏

本文详细介绍了如何使用CSS3的transform和animation属性创建一个正方体，并通过改变角度实现正方体的3D旋转效果。内容涵盖了关键帧动画的设置及3D变换原理。

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

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS3-Animation</title>
</head>
<style>
    *
    {
        margin: 0px;
        padding: 0px;
        list-style: none;
    }
    #view
    {
        margin:200px auto;
        width: 200px;
        height: 200px;
    }
    @keyframes scroll
    {
        100%
        {
            transform:rotate3d(1,2,3,360deg);
        }
    }
    #cube
    {
        position: relative;
        perspective: 500px;
        perspective-origin: 50% 50%;/*默认值是50%*/
        transform-style: preserve-3d;
        animation: scroll 1s linear 7s forwards infinite;
    }
    .item
    {
        background-color: yellow;
        height: 200px;
        width: 200px;
        border: 1px solid black;
        font-size: 150px;
        line-height: 200px;
        text-align: center;
        cursor: pointer;
        opacity: 0.5;
        position: absolute;
    }
    @keyframes item1
    {
        100%
        {
            transform: rotateY(-90deg);
        }
    }
    #item1
    {
        z-index: 6;
        transform-origin: left;
        animation: item1 1s linear 1s forwards;
    }
    @keyframes item2
    {
        100%
        {
            transform: rotateY(90deg);
        }
    }
    #item2
    {
        z-index: 5;
        transform-origin: right;
        animation: item2 1s linear 2s forwards;
    }
    @keyframes item3
    {
        100%
        {
            transform: rotateX(90deg);
        }
    }
    #item3
    {
        z-index: 4;
        transform-origin: top;
        animation: item3 1s linear 3s forwards;
    }
    @keyframes item4
    {
        100%
        {
            transform: rotateX(-90deg);
        }
    }
    #item4
    {
        z-index: 3;
        transform-origin: bottom;
        animation: item4 1s linear 4s forwards;
    }
    @keyframes item5
    {
        100%
        {
            transform: translateZ(200px);
        }
    }
    #item5
    {
        z-index: 2;
        animation: item5 1s linear 5s forwards;
    }
    @keyframes item6
    {
        100%
        {
            transform: rotateY(180deg);
        }
    }
    #item6
    {
        z-index: 1;
        animation: item6 1s linear 6s forwards;
    }
</style>
<body>
    <div id="view">
        <ul id="cube">
            <li class="item" id="item1">1</li>
            <li class="item" id="item2">2</li>
            <li class="item" id="item3">3</li>
            <li class="item" id="item4">4</li>
            <li class="item" id="item5">5</li>
            <li class="item" id="item6">6</li>
        </ul>
    </div>
</body>
</html>