旋转立方体

最新推荐文章于 2024-08-13 20:57:25 发布

赟儿

最新推荐文章于 2024-08-13 20:57:25 发布

阅读量220

点赞数 1

分类专栏： web实例练习文章标签： web html

本文链接：https://blog.csdn.net/weixin_44764552/article/details/121367972

版权

web实例练习专栏收录该内容

3 篇文章 0 订阅

订阅专栏

这篇博客展示了如何在HTML中创建一个包含六个div的布局，每个div内嵌入图片，并通过CSS实现不同的3D旋转和平移效果。通过设置div的样式、图片大小以及使用关键帧动画，创建了动态的3D视觉体验。文章还详细说明了如何使用`@keyframes`定义动画，并应用到`.wrap`元素上，实现了360度旋转的动画效果。

摘要由CSDN通过智能技术生成

创建一个html

在<body></body>中创建div并为每个div添加图片

<body>
    <div class="wrap">
        <!-- 左右 -->
        <div><img src="1.jpg"></div>
        <div><img src="2.jpg"></div>
        <!-- 上下 -->
        <div><img src="3.jpg"></div>
        <div><img src="4.jpg"></div>
        <!-- 前后 -->
        <div><img src="5.jpg"></div>
        <div><img src="6.jpg"></div>
    </div>
</body>

设置div基本格式在<style></style>中

  * {
            margin: 0;
            padding: 0;
        }
 div {
            width: 200px;
            height: 200px;
            background-color: skyblue;
            line-height: 200px;
            text-align: center;
            color: white;
            font-size: 100px;
            position: absolute;
        }
.wrap {
            padding: 100px;
            background-color: transparent;
        }

设置图片大小在<style></style>中

img{
    width:200px;
	height:200px;
}

设置每个页面旋转平移变化

/*wrap中第一个div*/
.wrap div:nth-of-type(1) {
            /*沿Y轴旋转 沿Z轴平移*/
            transform: rotateY(-90deg) translateZ(100px);
        }
.wrap div:nth-of-type(2) {
            transform: rotateY(90deg) translateZ(100px);
            
        }
.wrap div:nth-of-type(3) {
            transform: rotateX(90deg) translateZ(100px);
          
        }
.wrap div:nth-of-type(4) {
            transform: rotateX(-90deg) translateZ(100px);
           
        }
.wrap div:nth-of-type(5) {
            transform: translateZ(100px);
            
        }
.wrap div:nth-of-type(6) {
            transform: rotateX(180deg) translateZ(100px);
            
        }

定义关键帧动画

 /* 定义关键帧动画 */
         /* @keyframes 动画名 {
             关键帧
         } */

        @keyframes roll {
            from {
                transform: rotateX(0) rotateY(0) rotateZ(0);
            }
            to {
                transform: rotateX(360deg) rotateY(720deg) rotateZ(360deg);
            }
        }

添加动画到wrap,开启3D动画效果

.wrap {
            padding: 100px;
            background-color: transparent;
            transform-style: preserve-3d;  /*开启3D效果*/
            /* animation: 动画名 动画执行时间 
    [动画延迟时间 动画运动曲线 运动次数 是否反向执行 是否保留最后一帧] */
            animation: roll 8s ;
        }

最终效果如下：