复仇者联盟旋转立方体----------HTML+CSS这波你学费了吗

最新推荐文章于 2024-09-10 14:15:01 发布

拉不拉斯

最新推荐文章于 2024-09-10 14:15:01 发布

阅读量744

点赞数 3

文章标签： HTML CSS 自学经验网页设计立方体动画

本文链接：https://blog.csdn.net/qqshenbaobao/article/details/115412352

版权

由于上几周在自学HTML+CSS，所以博客也好久没更新，对此深感抱歉。本次附上自学HTML和CSS的经验总结和立方体代码，希望多多支持。

学习经验：

首先需要知道为啥学HTML+CSS:
HTML（ HyperText Markup Language ）超文本标记语言，是一种告诉浏览器每个网页组成是什么的程式语言。你可以利用它来定义网站中的文章内容、标题、连结、图片等，让浏览器知道网站整个架构的呈现。
CSS （Cascading Style Sheets）层叠样式表，是一种能为网页增添样式的电脑语言。换句话说，它就是能为你的网站修改字体样式、颜色、网页背景、甚至是华丽的动画与 3D 效果、让你增添设计感的工具。

看完上面的介绍，你也应该知道了他们的作用和意义，可能这也不足以让你有动力去学习他们，不急，继续往下看。
对于计算机专业的伙伴来说，这可能是专业所必需的。但我觉得他对在各种行业的人也同等重要。你可能因为一时兴趣而去坚持几天半天，但是很可能在这段时间，你就会深深爱上他们；你也可能因为想学习的更多，这也是一种好的想法。
但我还是想说出我的个人意见纯属个人意见

不管你的初衷如何，你都必须坚持下去，因为既然是你决定的开始；你也应该给自己一个完美的交代和给它一个收尾。坚持很难，放弃很易，你选择哪种可能就决定了你的命运。在学习的过程中你会因为一点成果而开心还会增加成就感，这样你就会越来越想学习，慢慢的你就和别人拉开了差距。但是，你需要抉择以后的职业，前端后端or全栈，如果是前两者，还需要你尽快决定，主修一门，当然另外一门也需要掌握，熟透主修，掌握辅修，这就是我的基本见解，如果还有什么疑问，敬请咨询。

立方体代码及成果展示:

<!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>Document</title>
    <style>
        html{
            perspective: 800px;
        }

        .cube{
            width:200px ;
            height: 200px;
            margin: 0 auto;
            margin-top: 250px;
            animation: run  20s infinite linear;
            transform-style: preserve-3d;
        }

        .cube> div{
            width: 200px;
            height: 200px;
            opacity: .7;
            position:absolute;
            
        }
      
        img{
            vertical-align: top;
            width: 200px;
            height: 200px;
        }
        .box1{
            transform: rotateY(90deg) translateZ(100px);
        }
        .box2{
            transform: rotateY(-90deg) translateZ(100px);
        }
        .box3{
            transform: rotateX(90deg) translateZ(100px);
        }
        .box4{
            transform:rotateX(-90deg) translateZ(100px)
        }
        .box5{
            transform: rotateY(180deg) translateZ(100px);
        }
        .box6{
            transform: rotateY(0deg) translateZ(100px);
        }
        @keyframes run{
            from{
                transform: rotateX(0) rotateZ(0);
            }

            to{
                transform: rotateX(1turn) rotateZ(1turn);
            }
        }
    </style>
</head>
<body>
    <div class="cube">
        <div class="box1">
            <img src="./1.jpg" alt="">
        </div>
        <div class="box2">
            <img src="./2.jpg" alt="">
        </div>
        <div class="box3">
            <img src="./3.jpg" alt="">
        </div>
        <div class="box4">
            <img src="./4.jpg" alt="">
        </div>
        <div class="box5">
            <img src="./5.jpg" alt="">
        </div>
        <div class="box6">
            <img src="./6.jpg" alt="">
        </div>
    </div>
</body>
</html>