CSS3 transform动画 3D旋转立体正方形

最新推荐文章于 2024-06-19 09:35:58 发布

陈醋拌饭

最新推荐文章于 2024-06-19 09:35:58 发布

阅读量2k

点赞数 3

分类专栏： css3 文章标签： animation css3 html5

本文链接：https://blog.csdn.net/weixin_44167504/article/details/108454438

版权

css3 专栏收录该内容

8 篇文章 3 订阅

订阅专栏

CSS3 transform动画 3D旋转立体正方形

在一个大的div里放置六个小div，分别向前后，向左右，向上下移动相等位置，再将平面div旋转，添加animation动画
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>立体正方形</title>
  <style>
    #box {
      margin: 100px auto 0;
      transform-style: preserve-3d;
      width: 300px;
      height: 300px;
      border: 1px solid #ccc;
      position: relative;
      animation: zhuan 5s linear infinite;
    }

    @keyframes zhuan {
      from {
        transform: rotateY(0);
      }

      50% {
        transform: rotateY(180deg) rotateZ(45deg);
      }

      to {
        transform: rotateY(360deg);
      }
    }

    #box>div {
      width: 100%;
      height: 100%;
      position: absolute;
    }

    /* 前方 */
    #box>:nth-child(1) {
      background-color: lightblue;
      transform: translateZ(150px);
    }

    /* 右边 */
    #box>:nth-child(2) {
      background-color: lightcoral;
      transform: translateX(150px) rotateY(90deg);
    }

    /* 左边 */
    #box>:nth-child(3) {
      background-color: lightseagreen;
      transform: translateX(-150PX) rotateY(90deg);
    }

    /* 下方 */
    #box>:nth-child(4) {
      background-color: gold;
      transform: translateY(150px) rotateX(90deg);

    }

    /* 上方 */
    #box>:nth-child(5) {
      background-color: lightslategrey;
      transform: translateY(-150px) rotateX(90deg);

    }

    /* 后方 */
    #box>:nth-child(6) {
      background-color: lightgreen;
      transform: translateZ(-150px);
    }
  </style>
</head>

<body>
  <div id="box">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</body>

</html>

陈醋拌饭

关注

3
点赞
踩
28

收藏

觉得还不错? 一键收藏
1
评论
CSS3 transform动画 3D旋转立体正方形

CSS3 transform动画旋转立体正方形<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>立体正方形</title> <style> #box {
复制链接

扫一扫

专栏目录