纯css3来实现3d旋转正方体的效果

最新推荐文章于 2020-10-14 17:29:11 发布
最新推荐文章于 2020-10-14 17:29:11 发布
阅读量327 收藏 2
点赞数
分类专栏： css3动画效果 文章标签： css css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Choo01/article/details/107463153
版权

在这里插入图片描述

  <style>
        :root, body{
            height: 100%;
        }
        body{
            perspective: 2000px; //景深越大，距离屏幕越远
            transform-style: preserve-3d;
        }
        @keyframes round{
            0%{
                transform: translate(-50% ,-50%) rotate3d(1,1,2,0deg)
            }
    
            100%{
                transform: translate(-50% ,-50%) rotate3d(1,1,2,360deg)   
            }
        }
        .wrapper{
            width: 200px;
            height: 200px;
            position: absolute;
            top:calc(50%);
            left:calc(50%);
            transform:  translate(-50% ,-50%)  ;
            transform-style: preserve-3d;
            animation: round 4s linear infinite;
            /* backface-visibility: hidden; */  //决定背面是否显示
        }
        .wrapper div{
            width: 200px;
            height: 200px;
            font-size: 20px;
            text-align: center;
            line-height: 200px;
            border: 1px solid black;
            box-shadow: 2px 2px 3px yellow,
                    inset 5px 5px 5px #ff4400;
            position: absolute;
      
        }
        .wrapper div:nth-of-type(1){
            transform: rotatey(0deg) translatez(100px) ;
            background-color: rgba(0, 0,200, 0.5); 
        }
        .wrapper div:nth-of-type(2){
            transform: rotateY(90deg) translatez(100px); 
            background-color: rgba(255, 0,255, 0.5)
        }
        .wrapper div:nth-of-type(3){
            transform: rotateY(90deg) translatez(-100px);
            background-color: rgba(0, 100,0, 0.5)
        }
        .wrapper div:nth-of-type(4){
            transform: rotatex(90deg) translatez(100px);
            background-color: rgba(255,,0, 0.5)
        }
        .wrapper div:nth-of-type(5){
            transform: rotatex(90deg) translatez(-100px);
            background-color: rgba(100, 200,0, 0.5)
        }
        .wrapper div:nth-of-type(6){
            transform: rotateX(0deg) translatez(-100px);
            background-color: rgba(0, 200,100, 0.5)
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
    </div>
    <script>
        // var wrapper = document.getElementsByClassName('wrapper')[0];
        //给body身上添加鼠标滑动事件，切换3d旋转轴的中心，实现立体效果
        document.body.onmousemove = function(e){
            console.log(e)
            this.style.perspectiveOrigin = '' + e.pageX + 'px '+ e.pageY +'px';
        }
    </script>
</body>
Choo01
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
3D立方体，可鼠标旋转
08-19
酷炫的3d立方体，用hammers插件，鼠标控制旋转
css3之实现网红正方体相册弹开动画
sxjit的博客
03-17 667
这里讲解实现抖音网红的正方体相册的动画制作(大正方体包裹小正方体，鼠标点击大正方体弹开展现小正方体)。 先上效果图： 1. 基础结构 老规矩，先写好基础结构。这里关于3D动画制作原理及正方体简单旋转制作的知识还不清楚的话可以参考我上一篇文章。首先父元素cube用来接收3D动画的视觉属性；然后box子元素包裹正方体内容并规定动画形式为3D；然后写进大正方体的6个面div和小正方体元素inner-b...
CSS3动画实现旋转魔方
萝卜666的博客
03-23 498
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
纯css3实现3D立方体旋转特效及代码
qq_43341418的博客
11-17 804
在网上看到3D立方体特效很酷炫，便想着学习一下，技术小白，大家担待，下面便是我所实现的视觉效果： 用大家熟悉的农药人物看着是不是比较容易感染情绪，嘿嘿。 话不多说，直接上代码（这里要感谢零下一度，毕竟从他那里直接粘来的大部分代码）： <!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"&g...
CSS3正方体的3D旋转动画特效.zip
07-11
<div id="main-wrapper">   <div id="maincube" class="cube"   <div class="front"></div>     <div class="back"></div>     <div class="right"></div>     <div class="left"></div>     <div class="top"></div>     <div class="bottom"></div>     <div id="smallcube" class="cube"     <div class="front"></div>       <div class="back"></div>       <div class="right"></div>       <div class="left"></div>       <div class="top"></div>       <div class="bottom"></div>       <div id="smallercube" class="cube"       <div class="front"></div>         <div class="back"></div>         <div class="right"></div>         <div class="left"></div>         <div class="top"></div>         <div class="bottom"></div>       </div>     </div>   </div> </div> 这是一款纯CSS3绘制的3D立体正方形旋转动画效果，多个CSS3正方体同时旋转动画特效。
CSS3自动旋转正方体3D特效
07-28
CSS3自动旋转正方体3D特效是一款基于css3 keyframes属性制作的图片相册自动旋转立方体特效。
旋转的正方体css3制作3D立体效果
09-08
这样，我们就创建了一个可交互的、3D旋转的正方体。用户可以通过鼠标悬停来观察立方体的不同侧面，增加视觉吸引力和互动性。 在实际项目中，还可以结合JavaScript来实现更复杂的交互，比如控制旋转速度、方向，或者...
纯css3实现的3D正方体骰子旋转动画特效源码.zip
11-20
纯css3实现的3D正方体骰子旋转动画特效源码.zip
3D正方体相册.rar
12-21
利用html+scc3实现的3D正方体相册展示 内嵌了3D立体的动画全面展示正方体相册 内部css3属性数据 是我自己测试出来，根据你的图片大小设定的。并非绝对的 利用Chrome、火狐浏览器亲测有效
HTML5 3D正方体特效 可任意面旋转定位
08-23
之前对于HTML5立方体动画我们已经有过不少分享了，像这款HTML5/CSS3 3D立方体扭曲动画、HTML5 3D立方体旋转动画都非常不错。今天我们要介绍的这款HTML5 3D立方体动画的特点是可以定位立方体的任意面，同时也可以在不同的方向上旋转。
3D正方体旋转
cedricdx的博客
04-20 2911
3D正方体旋转3D正方体旋转，当点击正方体时，正方体停止旋转 3D正方体旋转，当点击正方体时，正方体停止旋转 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>正方体</title> <style> *{ ma...
css3 旋转正方体特效实现
xiyunmengyuan的博客
05-09 814
实现效果： 完整实现代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>旋转立方体</title> <style type="text/css"> .container{ width: 100%; height: 1000px; background-color: #f5f5f5; padding-
纯CSS3实现一个旋转的3D立方体盒子
热门推荐
daniel_ding的技术博客
08-03 1万+
网易前端微专业课程，里面有一个课外作业是实现一个3D旋转立方体，花了点时间做了下，还有点意思，写个简单教程，供大家学习。
css3 实现正方体3D旋转
water_Popcorn的博客
11-29 702
源代码如下： html lang="en"> head> meta charset="UTF-8"> title>Titletitle> style> .all{ margin-left: 200px; width: 300px; height: 300px;
用Css3实现旋转的立方体
weixin_44544859的博客
01-26 2278
(作者：杨东升，撰写时间：2019年1月26日) 通过Css3，我们能够创建动画，这可以在许多网页中取代一些JavaScript中复杂的动画效果的写法，下面让我们用css3实现一个旋转的立方体吧。 Html部分： 1）先给六个面写一个公共的类：cube-face，再给六个面分别给六个不同的类名： &lt; div class=“cube”&gt; &lt; div class=“cube-face...
CSS3 3D旋转立方
_andylala的博客
06-04 7763
一、3D中的透视 &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;1、透视是我们观察事物的方式 &amp;nbsp; &amp;nbsp; &amp;nbsp; &amp;nbsp;在美术学中，有一种画法叫做透视画法，他让我们对所观察的物体从二维拓展到三维，也就是说，平面的物体变成了立体，占据了独自的空间。请看下图： &amp;nbsp; &amp;nbsp; &amp
css实现立体正方形旋转效果
qq_44183616的博客
02-29 2338
今天呢，用一段简单的代码来实现一个非常炫酷的立方体旋转的案例，主要使用的代码是css的动画以及3d的位移、旋转等属性。具体代码如下：
纯用CSS来实现3D立方体旋转效果
qq_44958875的博客
07-14 2095
这次用纯CSS来实现3D立方体旋转效果 效果如下（可以想象成一个旋转的立方体） HTML部分 首先 创建一个ul标签 在其ul标签下的6个li标签 相当于正方体的6个面 <body> <ul> <li></li> <li></li> <li></li...
CSS3的3D旋转
weixin_41824429的博客
10-14 351
CSS3的3D旋转 沿着y轴方向逆时针旋转 这是图中旋转的图片 代码 <style> *{ margin: 0; padding: 0; } body{ background: rgb(0, 13, 83); } @keyframes turn{ 0%{ -webkit-transfo
css3d旋转正方体
最新发布
09-23
CSS3D旋转正方体可以通过使用CSS的transform属性来实现。使用rotate3d函数可以指定旋转轴和旋转角度。在给定的示例中，使用了一个名为box1的div元素，并在:hover时应用了旋转效果。 具体过程如下： 1. 创建一个包含...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值