CSS 3D动态立体图形

最新推荐文章于 2024-04-13 15:44:30 发布

zhgkay

最新推荐文章于 2024-04-13 15:44:30 发布

阅读量1.6k

点赞数 1

分类专栏： WEB前端参考手册 CSS 文章标签： 3D 动态立方体

本文链接：https://blog.csdn.net/Tok_Tik/article/details/94751554

版权

CSS 3D动态立方体

1. HTML

<body>
  <div class="box">
    <div class="test"></div>
    <div class="test"></div>
    <div class="test"></div>
    <div class="test"></div>
    <div class="test"></div>
    <div class="test"></div>
  </div>
</body>

2. CSS

  <style type="text/css">
    .box {
      width: 500px;
      height: 500px;
      position: relative;
      margin: 200px auto;
      transform-style: preserve-3d;
      perspective: 15000px;
      transition: all 5s linear;
      animation: mytest 5s linear infinite normal;
    }

    @keyframes mytest {
      0% {
        transform: rotateX(0deg) rotateY(0deg);
      }

      100% {
        transform: rota

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

zhgkay

关注关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
CSS 3D动态立体图形

CSS 3D动态立方体1. HTML<body> <div class="box"> <div class="test"></div> <div class="test"></div> <div class="test"></div> <div clas...
复制链接

扫一扫