css3拆解正方体动画效果

最新推荐文章于 2024-04-02 22:42:06 发布
最新推荐文章于 2024-04-02 22:42:06 发布
阅读量607 收藏 1
点赞数 1
文章标签： css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/SugarXiXixi/article/details/108641273
版权

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

 

 

 

实现效果

提示：以下是本篇文章正文内容，下面案例可供参考

一、注意事项

1 元素旋转跟圆点    transform-origin: 50% 100%;有关

 

2 transfrom 旋转跟属性的值得顺序有关 

3要借助辅助盒子实现 后和上 一起旋转

二、使用步骤

1.html

代码如下（示例）：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>正方体</title>
        <style type="text/css">
        </style>
        <link rel="stylesheet" type="text/css" href="../css/cfzft.css"/>
    </head>
    <body>
        <div class="bigbox">
            <!--辅助盒子-->
            <div class="fzbox">
                <div class="top">上</div>
                <div class="behind">后</div>
            </div>
            
            <div class="bottom">下</div>
            <div class="left">左</div>
            <div class="right">右</div>
            <div class="front">前</div>
            
        </div>
    </body>
</html>

2.css

代码如下（示例）：

.bigbox {
    width: 300px;
    height: 300px;
    /*border: 1px solid black;*/
    margin: 200px auto;
    /*perspective: 1800px;*/
    transform-style: preserve-3d;
    perspective-origin: 50% 50%;
    transform: rotateX(-45deg) rotateY(45deg);
    /*animation: box-run 3s linear alternate infinite;*/
}

@keyframes box-run {
    0% {
        transform: rotateX(45deg) rotateY(-45deg);
    }
    100% {
        transform: rotateX(405deg) rotateY(-405deg);
    }
}

.bigbox div {
    position: absolute;
    top: 0;
    left: 0;
    width: 300px;
    height: 300px;
    opacity: 1;
    text-align: center;
    line-height: 300px;
    font-size: 25px
}
.fzbox{
    transform-style: preserve-3d;
    transform-origin: 50% 100%;
    border: 1px black solid;
    transform: translateZ(-150px) ;
   animation: fzbox-run 1s linear alternate;
    animation-fill-mode: forwards;
    animation-delay: 3s;
    
}
@keyframes fzbox-run{
    0%{
        transform: translateZ(-150px) ;
    }
    100%{
        transform: translateZ(-150px) rotateX(90deg);
    }
}

.top {
    background: salmon;
    transform-origin: 50% 0%;
    transform: rotateX(90deg) ;

    animation: top-run 1s linear alternate;
    animation-fill-mode: forwards;
    animation-delay: 4s;

}
@keyframes top-run{
    0%{
    transform: rotateX(90deg);
        
    }
    100%{
    transform: rotateX(90deg) rotateX(90deg);
        
    }
}
.behind {
    background: aquamarine;
    
    
    animation: behind-run 1s linear alternate;
    animation-fill-mode: forwards;
}
.bottom {
    background: silver;
    transform: rotateX(-90deg) translateZ(150px);
}

.left {
    background: saddlebrown;
    transform-origin: 50% 100%;
    transform: rotateY(-90deg) translateZ(150px) ;
    animation: left-run 1s linear alternate;
    animation-fill-mode: forwards;
    animation-delay: 1s;
}
@keyframes left-run{
    0%{
    transform: rotateY(-90deg) translateZ(150px);
        
    }
    
    100%{
    transform:rotateY(-90deg) translateZ(150px) rotateX(-90deg) ;
        
    }
}

.right {
    background: olive;
    transform-origin: 50% 100%;
    
    transform: rotateY(-90deg) translateZ(-150px)  ;
    animation: right-run 1s linear 1;
    animation-fill-mode: forwards;
    animation-delay: 2s;
    
    
}
@keyframes right-run{
    0%{
    transform: rotateY(-90deg) translateZ(-150px);
        
    }
    
    100%{
    transform:rotateY(-90deg) translateZ(-150px) rotateX(90deg) ;
        
    }
}

.front {
    transform-origin: 50% 100%;
    background: #ADFF2F;
    transform: translateZ(150px) ;
    animation: front-run 1s 1 linear ;
    animation-fill-mode: forwards;
    
    

}
@keyframes front-run{
    0%{
    transform: translateZ(150px);
        
    }
    
    100%{
    transform:translateZ(150px) rotateX(-90deg) ;
        
    }
}

 

总结

3D效果 应该借助舞台实现 旋转舞台 改变原点 （改变y轴数值，改变的是x轴的位置） 借助辅助盒子实现多个面一起旋转

哈哈西西）
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS3 3D立方体拆分动画代码.zip
07-05
CSS3 3D立方体动画代码，3D立方体旋转动画，鼠标移动到3D立方体，拆分动画。
3D立方体拆解动画
qq_42889406的博客
09-20 2772
3D立方体拆解动画:HTML+CSS 项目源码评论区分享
CSS 3D动画【大小可开合正方体】，阿里出品
最新发布
2401_83973995的博客
04-02 631
CodeChina开源项目：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】给大家分享一些关于HTML的面试题。图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且后续会持续更新**如果你觉得这些内容对你有帮助，可以添加V获取：vip1024c （备注前端）[外链图片转存中…(img-sq9J6hP2-1712068915204)]CodeChina开源项目：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
HTML+CSS 3D立方体拆解动画
09-20
HTML+CSS 3D立方体拆解动画,值观视角拆解立方体；HTML+CSS实现.................................
css立方体动画
坚持原创
03-09 85
<div class="box"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li&g...
纯CSS写立方体动画
baidu_41604826的博客
04-24 220
CSS3动画animation+@keyframes的使用 代码： CSS body, html, div, ul, li { margin: 0; padding: 0; } section { position: relative; ...
css代码写3D盒子动画
weixin_46249441的博客
12-15 1232
完整代码见下： html： <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>HTML+CSS 3D盒子</title> <link rel="st..
css 3D盒子动画
chenqiong1991的博客
01-22 1071
翻转盒子放在父容器中，触发动画的hover绑定在父容器上。否则，在360、搜狗等浏览器中，直接给3D盒子绑定hover，会出现抖动现象。 本例子中，div为盛放3D盒子的父容器，且设置perspective属性，以获得更好的3D透视效果。同时，这会导致盒子翻转后大小会发生变化，再给翻转后的盒子设置translate3d(0,-50px,0); 从而让盒子恢复原始大小。 主要通过::before伪...
CSS3自动旋转正方体3D特效
07-28
本篇将深入解析如何利用CSS3的keyframes属性创建一个自动旋转的正方体3D特效，以此实现动态的图片相册展示效果。 首先，我们需要了解CSS3的`transform`属性，它是实现3D变换的基础。`transform`允许我们对元素进行...
CSS3实现跳动的动画效果
12-02
在CSS3中，我们可以利用各种新的属性和方法来创建丰富的动画效果。本示例中，我们将探讨如何通过CSS3实现一个跳动的动画效果。这个效果由两部分组成：元素的阴影部分（`::before`伪元素）和元素本身（`::after`伪...
基于CSS3和GSAP的超酷盒子爆炸动画特效
12-13
这是一款使用GSAP的TweenMax.js和CSS3来制作的效果炫酷的盒子爆炸动画特效。该爆炸动画在用户点击页面中的一个弹跳的盒子的时候，盒子会爆炸为烟雾，然后会出现SVG Logo，整个效果非常连贯逼真。
纯CSS3创意气泡动画特效
07-24
在本文中，我们将深入探讨“纯CSS3创意气泡动画特效”这一主题，这是一种利用CSS3的关键帧动画（keyframes）特性来实现的创新设计。这种特效能够为网站添加动态和互动性，提升用户体验，特别适用于儿童网站、社交...
纯CSS3绘制正方体旋转动画特效
06-24
CSS3中的3D转换和透视效果使得开发者能够创建出具有深度感的立体视觉效果，例如这个正方体旋转动画。 首先，要创建一个正方体的基础结构，我们需要六个不同的面：前、后、上、下、左和右。在HTML中，这可以通过创建...
3D效果CSS柱状图动画特效
06-24
这里我们要探讨的是如何利用CSS3实现3D效果的柱状图动画特效，这在数据可视化、统计报告以及网页设计中非常常见。"3D效果CSS柱状图动画特效"是一个全屏个性化的设计，能够吸引用户的注意力，为数据展示带来生动有趣...
HTML5+CSS3小实例：开箱子动画
艾恩小灰灰的博客
12-02 710
实例：开箱子动画。技术栈：HTML+CSS。
css自定义盒子形状及动画应用
weixin_44283589的博客
03-14 2941
css自定义盒子形状及动画应用 <style> clip-path: polygon(X1 Y1,X2 Y2,....) </style> 当我们写页面时对盒子的形状有需求时,除了使用border-radius来给盒子设置圆角还可以使用这个属性来自定义盒子形状 里面的参数表示每一个点的坐标,x1 y1为起始点 单位可以是百分比或者px, 最后一个定义的点会自动连接第一个点形成封闭图形 有了这个属性,除了定义盒子形状我们还可以来实现一些有趣的动画效果 例如: 注意:动画中两组poly
纯css实现3D立方体
hhzzcc_的博客
04-04 3579
纯css实现3D立方体特效，通过3D旋转和平移原理实现，话不多说直接贴代码&lt;html&gt; &lt;head&gt; &lt;style type="text/css"&gt; body,html{ margin: 0; } body{ display: flex; ...
那些年我们用css3实现的打开盒子的3d动画
车联网开发的博客
12-01 2235
本片博客意在练习使用css3的新增特性实现一些炫酷的特效 特效如图 代码如下 &lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="Generator" content="EditPlus®"
用css动画——做一个会旋转的复仇者盲盒
m0_53394907的博客
09-04 700
用css动画——做一个会旋转的复仇者盲盒。
css3图片轮播动画效果
02-28
CSS3提供了多种方式来实现图片轮播动画效果，以下是其中一种常见的实现方式： 1. 使用CSS3动画和关键帧（@keyframes）来创建图片轮播效果。首先，需要定义一个包含多个关键帧的动画，每个关键帧对应不同的图片位置或者透明度。然后，将该动画应用到图片元素上。 示例代码如下： ```css /* 定义动画 */ @keyframes slideshow { 0% { opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } } /* 应用动画 */ .slideshow-container { position: relative; width: 100%; height: 300px; overflow: hidden; } .slideshow-container img { position: absolute; width: 100%; height: 100%; animation: slideshow 10s infinite; } ``` 2. 使用CSS3过渡（transition）来实现图片轮播效果。通过设置不同的过渡效果和延迟时间，可以实现图片的平滑切换。 示例代码如下： ```css .slideshow-container { position: relative; width: 100%; height: 300px; overflow: hidden; } .slideshow-container img { position: absolute; width: 100%; height: 100%; transition: opacity 1s ease-in-out; } .slideshow-container img:first-child { opacity: 1; } .slideshow-container img:not(:first-child) { opacity: 0; } /* 添加过渡效果 */ .slideshow-container:hover img { opacity: 0; } .slideshow-container:hover img:first-child { opacity: 1; } ``` 这只是其中的两种实现方式，还有其他的方法可以实现图片轮播动画效果。你可以根据自己的需求选择适合的方式来实现。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值