3D盒子旋转动画

最新推荐文章于 2023-03-15 20:20:19 发布
最新推荐文章于 2023-03-15 20:20:19 发布
阅读量617 收藏 2
点赞数
分类专栏： 3D盒子动画 文章标签： html css css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43777220/article/details/104581222
版权

3D动画旋转

效果展示：

在这里插入图片描述

代码展示：

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .bigBox{
            width: 500px;
            height: 500px;
            position: fixed;
            left: 0;right: 0;
            top: 0;bottom: 0;
            margin: auto;
            transform-style: preserve-3d;
            transform: rotateX(-20deg) rotateY(30deg);
            /* 
            	这个3d盒子与spin动画绑定
				就是说给这个.bigBox的盒子添加动画spin
			*/
            animation: spin 5s  infinite  linear;
        }
        .bigBox div{
            width: 500px;
            height: 500px;
            font-size: 50px;
            line-height: 500px;
            text-align: center;
            border: 2px solid gray;
            position: absolute;
            left: 0;top:0;
            opacity: 0.6;
        }
        /* 把每个s_box的移到相对应的盒子面,并设置好角度 */
        .s_box1{
            background-color: purple;
            transform: translateX(250px) rotateY(90deg);
           
        }
        .s_box2{
            background-color: skyblue;
            transform: translateX(-250px) rotateY(-90deg);
           
        }
        .s_box3{
            background-color: olive;
            transform: translateY(-250px) rotateX(-90deg);
           
        }
        .s_box4{
            background-color: rgb(60, 15, 223);
            transform: translateY(250px) rotateX(-90deg);
            
        }
        .s_box5{
            background-color: rgb(241, 121, 9);
            transform: translateZ(250px);
        }
        .s_box6{
            background-color: rgb(248, 16, 16);
            transform: translateZ(-250px) rotateY(180deg);
        }
        /* 创建动画 */
        @keyframes spin{
            0%{
                transform: rotateX(-20deg) rotateY(0deg) scale3d(0.2,0.2,0.2);
            }
            25%{
                
                transform: rotateX(-20deg) rotateY(180deg) scale3d(0.6,0.6,0.6);
            }
            50%{
                transform: rotateX(-20deg) rotateY(360deg) scale3d(1,1,1);
            }
            75%{
                transform: rotateX(-20deg) rotateY(540deg) scale3d(0.6,0.6,0.6);
            }
            100%{
                transform: rotateX(-20deg) rotateY(720deg) scale3d(0.2,0.2,0.2);
            }
        }
        /* 鼠标悬停3D盒子的时候，暂停动画 */
        .bigBox:hover{
            animation-play-state:paused;
        }
    </style>
</head>
<body>
    <div class="bigBox">
        <div class="s_box1">1</div>
        <div class="s_box2">2</div>
        <div class="s_box3">3</div>
        <div class="s_box4">4</div>
        <div class="s_box5">5</div>
        <div class="s_box6">6</div>
    </div>
Marlen_L
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html简单盒子代码,CSS3 3D盒子超简单制作
weixin_34334554的博客
06-09 2261
这是我第一次在这里写文章，如果写得不好的话，请大家多多包涵一下。在XX网学完CSS3之后，然后我懂了一个道理，XX网评论区域存在一个小明梗，这个梗是这样的：1+1=2, 2+2=4，问小明今年多少岁 = 。= 原因是XX网教的基础是非常的基础，一到实战就GG了。看完CCS3课程后，自己尝试手写一下3D盒子的切换，虽然不是很炫。但是为了来练练手，顺便检查一下自己的学习成果，写了一个超鸡简单的鼠标...
jQuery自定义图片3D盒子旋转代码
06-24
本项目“jQuery自定义图片3D盒子旋转代码”是基于jQuery和Vue.js实现的一个创新的图像展示解决方案，旨在为用户提供一种立体、动态的视觉体验。 首先，我们来探讨jQuery在其中的角色。jQuery提供了简洁的API，使得...
HTML + CSS 实现炫彩 3d 盒子
qq_43477721的博客
04-23 1216
B站地址https://www.bilibili.com/video/BV1jC4y14739?from=search&seid=14906173926344311066 看完之后，总有一种自己 CSS 白学的感觉，太卑微了，向大佬低头???????????????????????????????? 下面的评论有链接，里面有素材，（真是太贴心了） <!DOCTYPE html> <html lang="en">...
3D立体模型盒子旋转特效
da_shuai_bi_a的博客
03-15 346
这是一个3D的立方体盒子 给盒子添加动画属性 使其可以转动。： 原理其实很简单 我们看到的一个立方体其实就是靠六个平面搭建起来的。
前端动画——3D立方体盒子
果冻
05-10 556
前言 学动画的时候看到的，很有意思，有兴趣可以看全文 CSS 怎样写一个动画（从基础动画到3d动画) 完整代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv
CSS3-3D盒子
weixin_30550081的博客
08-20 90
<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keyword...
jQuery自定义图片3D盒子旋转特效代码
03-20
【jQuery自定义图片3D盒子旋转特效代码】是一种利用jQuery库和Vue框架实现的创新性网页展示技术。这种特效能够为用户提供一个3D视角的图片展示盒子，通过旋转操作，可以全方位地展示图片，增强用户体验，尤其适用于...
jQueryCSS3 3D旋转盒子动画 可自定义封面图片
12-23
在`mousedown`时记录初始鼠标位置，然后在`mousemove`中计算鼠标移动的距离并相应地更新3D盒子的旋转角度。最后，在`mouseup`时停止更新，以确保动画的平滑性。 为了适应不同大小的屏幕和浏览器，你可能还需要对...
css3d旋转盒子实例
11-07
在实际项目中，你还可以通过JavaScript或者CSS动画库（如`animaiton-3d`文件可能包含的内容）来动态改变旋转参数，使盒子按照特定的时间序列和速度进行旋转，增强用户体验。 总结一下，这个"css3d旋转盒子"实例展示...
3D动画相册和旋转木马相册.rar
11-29
纯JavaScript实现 旋转木马/3d相册特效(鼠标拖拽旋转)单纯使盒子转动就可以实现旋转木马，可以使用setinterval来不断使其旋转。 如果想使用鼠标拖动实现旋转木马，则需要再加一些代码，使装有盒子的容器(wrap)能够...
HTML5 jQuery实现3D旋转的Google搜索框盒子特效.rar
07-10
HTML5 jQuery实现3D旋转的Google搜索框盒子特效，网页特效分享-Google Images Box - CSS 3D 例子，测试时请确保您的浏览器支持CSS Transforms，否则本效果会异常。鼠标放在搜索区域，盒子即可旋转，旋转的角度根据你的鼠标移动情况自动改变，具有逼真的3D旋转变幻效果。
html5 3D旋转立方体
07-19
使用html5+css3+jquery组合，一个可以通过按键控制立方体旋转的demo，具有3D效果。
3D盒子旋转
weixin_44996454的博客
12-16 235
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; }
css动画-3d旋转盒子
zhang_ntmare的博客
11-07 3229
left:0; right:0; top:0; bottom:0; margin：auto;会使text居中，如果text没有宽高，则会继承父集的宽高。适合body 内的遮罩 3d动画记得设置3d，transform-style: preserve-3d; 重置3d中心，transform-origin:center center;
html3d盒子旋转,css3+javascript怎么做一个旋转的3d盒子？
weixin_33907300的博客
06-20 711
今天写点css3，3d属性写的3d盒子，结合javascript让盒子随鼠标旋转起来今天带了css3新属性3d#a{width: 200px;height: 200px;margin: 200px auto;position:relative; /*给父元素相对定位*/transform-style: preserve-3d; /*父元素设为3d*/transform: perspective(1...
HTML实现简单的动画效果(盒子过渡，扑克旋转)
热门推荐
冷色调的夏天的博客
08-22 2万+
HTML实现简单的动画效果(盒子过渡，扑克旋转) // 实现一个简单的鼠标点击div触发过渡效果 <!doctype html> <html> <head> <meta charset="utf-8"> <title>过渡效果</title> <style> *{ margin:0px; padding:0px;}...
HTML5基础加强css样式篇（css属性transform 函数（3D）3D盒子）（二十七）
余正源的博客
03-24 594
1
HTML+css做炫酷的3d盒子反转
文情
07-03 669
3d盒子反战 效果如图如下： HTML重要的代码如下： <ul> <li> <div class="box"> <div class="front">目录</div> <div class="bottom">市场调研</div> </div> </li>
纯css样式实现盒子 3D 旋转、鼠标悬停效果
lwpoor123的博客
07-13 4023
看到一个css3的动画效果，感觉很高大上的样子，心血来潮自己研究了一下。先来个效果图： 下面来看这个3d效果究竟是怎么实现的。 （目前IE暂不支持 transform-style: preserve-3d。） 首先，用到的是 transform-style: preserve-3d, 使被转换的子元素保留其 3D 转换。其次是 perspective: 600px,元素距离视图的距离，以像
css实现3个盒子3d旋转动画
最新发布
12-16
以下是CSS实现3个盒子3D旋转动画的代码和步骤： ```html <div class="box"></div> <div class="box"></div> <div class="box"></div> ``` ```css .container { perspective: 1000px; /* 视距，决定了3D效果...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值