css3D旋转正方体

最新推荐文章于 2022-05-17 22:12:51 发布

我想吃烤肉肉

最新推荐文章于 2022-05-17 22:12:51 发布

阅读量203

点赞数

分类专栏： css学习文章标签： css3 html animation

本文链接：https://blog.youkuaiyun.com/DZY_hungry/article/details/113873634

版权

css学习专栏收录该内容

1 篇文章

订阅专栏

这个HTML代码展示了如何使用CSS3实现一个3D立方体的旋转动画，包括六个面（顶部、底部、左侧、右侧、前面和后面）。通过变换属性（translate和rotate），实现了立方体各个面的位置和角度，同时使用了动画关键帧@keyframes实现立方体的连续旋转效果，为网页增添动态视觉体验。

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

<html>
    <head>
        <title>3D立方体</title>
        <style>
            .top {
                background-color: blue;
                width: 200px;
                height: 200px;
                position: absolute;
                left: 0;
                top: 0;
                transform: translateY(-100px) rotateX(90deg);
            }
            .bottom {
                background-color: aqua;
                width: 200px;
                height: 200px;
                position: absolute;
                left: 0;
                top: 0;
                transform: translateY(100px) rotateX(-90deg);
            }
            .left {
                background-color: blueviolet;
                width: 200px;
                height: 200px;
                position: absolute;
                left: 0;
                top: 0;
                transform: translateX(-100px) rotateY(-90deg);
            }
            .right {
                background-color: bisque;
                width: 200px;
                height: 200px;
                position: absolute;
                left: 0;
                top: 0;
                transform: translateX(100px) rotateY(90deg);
            }
            .front {
                background-color: pink;
                width: 200px;
                height: 200px;
                position: absolute;
                left: 0;
                top: 0;
                transform: translateZ(100px);
            }
            .back {
                background-color: goldenrod;
                width: 200px;
                height: 200px;
                position: absolute;
                left: 0;
                top: 0;
                transform: translateZ(-100px) rotateY(180deg);
            }
            .rotateSquare {
                position: absolute;
                top: 0;
                left: 0;
                bottom: 0;
                right: 0;
                margin: auto;
                transform-style: preserve-3d;
                width: 200px;
                height: 200px;
                transform: rotateY(20deg) rotateX(20deg);
                animation:changeSolution 8s infinite linear;
                text-align: center;
                font-size: 125px;
            }
            @keyframes changeSolution{
                0%   {transform: rotateX(0deg) rotateY(0deg);}
                25%  {transform: rotateX(90deg) rotateY(90deg);}
                50%  {transform: rotateX(180deg) rotateY(180deg);}
                75%  {transform: rotateX(270deg) rotateY(270deg);}
                100% {transform: rotateX(360deg) rotateY(360deg);}
            }
        </style>
        <script></script>
    </head>
    <body>
      <div class="rotateSquare">
              <div class="top">大</div>
              <div class="bottom">家</div>
              <div class="left">新</div>
              <div class="right">年</div>
              <div class="front">快</div>
              <div class="back">乐</div>
      </div>
    </body>
</html>