纯CSS3实现3d星空魔方旋转动画特效

最新推荐文章于 2023-03-29 11:10:30 发布

joyouscola

最新推荐文章于 2023-03-29 11:10:30 发布

阅读量1.3k

点赞数 1

分类专栏： CSS3 文章标签： css3

本文链接：https://blog.csdn.net/joyouscola/article/details/112145875

版权

项目效果

在这里插入图片描述

实现原理

先给一个星空背景，再创建一个大的div ，里面在创建6个小的div也就是六个面，再给他们一个position: absolute使他们重叠在一起，再给一个transform: translateZ(px)（最佳给的是宽高的一半），剩余的再给一个动画旋转，下面有代码来分步来说

1、先做出背景图和一个有3d效果的方块图
HTML部分

<body>
<div class="father">
        <div class="son1"></div>
        <div class="son2"></div>
        <div class="son3"></div>
        <div class="son4"></div>
        <div class="son5"></div>
        <div class="son6"></div>
    </div>
    </body>

CSS部分

 <style>
  *{
   
            margin: 0;
            padding: 0;
        }
        :root,body{
   
            width: 100%;
            height: 100%;
        }
         body{
   
            height: 100%;
            background-image: url(img/1.jpeg);
            background-size:cover;
            perspective: 3000px;
            transform-style: preserve-3d;
            perspective-origin: 750px 800px;
        }
        .father{
   
            width: 100px;
            height: 100px;
            position: absolute;
            top: calc(50% - 50px);
            left: calc(50% - 50px);
        }
         .father div{
   
            width: 100px;
            height: 100px;
            position: absolute;
            
        }

效果图

在这里插入图片描述
2、之后给他一个3d效果让其在Y轴上旋转再给他一个动画效果，使其旋转起来。
CSS部分

 @keyframes run{
   
            0%{
   
                transform: rotateY(0deg);
            }
            100%{
   
                transform: rotateY(360deg);
            }
        }
        .father{
   
            width: 100px;
            height: 100px;
            position: absolute;
            top: calc(50% - 50px);
            left: calc(50% - 50px);
            animation: run 3s linear infinite;
            transform-style: preserve-3d;
        }

效果
在这里插入图片描述
3、给其一个最大的div实现外部的6个浅色的面

HTML部分

<body>
    <div class

最低0.47元/天解锁文章

joyouscola

关注

1
点赞
踩
15

收藏

觉得还不错? 一键收藏
0
评论
纯CSS3实现3d星空魔方旋转动画特效

项目效果实现原理先给一个星空背景，再创建一个大的div ，里面在创建6个小的div也就是六个面，再给他们一个position: absolute使他们重叠在一起，再给一个transform: translateZ(px)（最佳给的是宽高的一半），剩余的再给一个动画旋转，下面有代码来分步来说1、先做出背景图和一个有3d效果的方块图HTML部分<body><div class="father"> <div class="son1"></di
复制链接

扫一扫