css3实现盒子 3D 旋转效果

最新推荐文章于 2022-11-06 01:22:52 发布

飞天巨兽

最新推荐文章于 2022-11-06 01:22:52 发布

阅读量1.1k

点赞数 1

分类专栏：笔记文章标签： html css css3

本文链接：https://blog.csdn.net/qq_41538165/article/details/121447040

版权

笔记专栏收录该内容

27 篇文章 0 订阅

订阅专栏

效果展示：

代码实现：

<!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>3D盒子</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    body,html{
      width: 100%;
      height: 100%;
    }
    #wrap{
      /* 元素距离视图的距离 */
      perspective: 1200px;
    }
    #box{
      width: 400px;
      height: 400px;
      margin: 100px auto;
      position: relative;
      line-height: 400px;
      color: white;
      /* 	子元素将保留其 3D 位置。 */
      transform-style: preserve-3d;
      font-size: 60px;
      /* 动画 */
      animation: 10s rotate linear infinite ;
    }
    #box>div{
      position: absolute;
      box-shadow: inset 0 0 20px rgba(0,0,0,0.9);
      width: 100%;
      height: 100%;
      text-align: center;
      opacity: .6;
    }
    #box div:nth-child(1) {
      transform: rotateY(0deg) translateZ(200px);
      background: blue;
    }
    #box div:nth-child(2) {
      transform: rotateY(90deg) translateZ(200px);
      background: red;
    }
    #box div:nth-child(3) {
      transform: rotateY(180deg) translateZ(200px);
      background: blueviolet;
    }
    #box div:nth-child(4) {
      transform: rotateY(270deg) translateZ(200px);
      background: grey;
    }
    #box div:nth-child(5) {
      transform: rotateX(-90deg) translateZ(200px);
      background: green;
    }
    #box div:nth-child(6) {
      transform: rotateX(90deg) translateZ(200px);
      background: orange;
    }
    @keyframes rotate {
      0% {
        transform: rotateX(0deg);
      }
      25% {
        transform: rotateX(180deg);
      }
      50% {
        transform: rotateX(360deg) rotateY(0deg);
      }
      75% {
        transform: rotateX(360deg) rotateY(180deg);
      }		
      100% {
        transform: rotateX(360deg) rotateY(360deg);
      }
    }
  </style>
</head>
<body>
  <div id="wrap">
    <div id="box">
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
      <div>5</div>
      <div>6</div>
    </div>
  </div>
</body>
</html>

项目预览地址：

3D盒子

项目地址：

GitHub - txd688/practice: 小项目练习（css3、js、vue、node等）

飞天巨兽

关注

1
点赞
踩
10

收藏

觉得还不错? 一键收藏
打赏
0
评论
css3实现盒子 3D 旋转效果

效果展示：相关知识：子元素按照3维空间摆放：transform-style: preserve-3d;定义 3D 元素距视图的距离，以像素计。该属性允许您改变 3D 元素查看 3D 元素的视图设置元素在X轴变换：transform: rotateX(90deg)设置元素在Y轴变换：transform: rotateY(90deg)设置元素在Z轴变换transform:translateZ(200px);当rotateX(90d...
复制链接

扫一扫