精华内容
下载资源
问答
  • 2022-05-14 21:24:28

    友友们!!纯纯用css就可以写出会自己旋转的3D立方体!

    首先需要了解几个属性:

    transform 变形

    translate 位移

    rotate 旋转

    perspective 透视

    transform-style:preserve-3d 开启立体呈现

    定义动画:

    @keyframes name{

    from{

    transform:rotate(0deg)

    }

    to{

    transform:rotate(360deg)

    }

    }

    调用动画:

    animation:name 1s linear infinite

    认识了这些需要用到的属性以后,我们就可以开始写代码啦~

    我们可以先写出html结构

     <div class="cube">
        <main>
          <div class="front"></div>
          <div class="back"></div>
          <div class="left"></div>
          <div class="right"></div>
          <div class="top"></div>
          <div class="bottom"></div>
        </main>
      </div>

    写出立方体的六个面,并且给出每个面不同的类名。

    接下来再来写CSS部分:

    给大盒子设置宽高,并且给出视距,以便等会更好的观察立方体

      .cube {
          width: 200px;
          height: 200px;
          perspective: 800px;
          margin: 100px;
        }

    然后咱们要给盒子的主体调整一下位置,其他六个面可以更好的摆放,记得要给主体父盒子开启3D立体呈现哦~

      main {
          width: 100%;
          height: 100%;
          transform: translateZ(-100px);
          transform-style: preserve-3d;
        }

    接下来就是要调整立方体的六个面了,先统一设置div的宽高:

     .cube div {
          width: 100%;
          height: 100%;
          position: absolute;
        }

    然后就可以一个面一个面的位移、旋转,把它们调整至我们需要它所在的位置了

     .front {
          background: pink;
          transform: translateZ(100px);
        }
    
        .back {
          background-color: grey;
          transform: translateZ(-100px);
        }
    
        .left {
          background-color: khaki;
          transform: rotateY(90deg) translateZ(100px);
        }
    
        .right {
          background-color: lightblue;
          transform: rotateY(90deg) translateZ(-100px);
        }
    
        .top {
          background-color: lightseagreen;
          transform: rotateX(90deg) translateZ(-100px);
        }
    
        .bottom {
          background-color: lightsalmon;
          transform: rotateX(90deg) translateZ(100px);
        }

    这个部分的位置转换、数值等一定要算清楚噢,让每个面都能连接在一起~

    设置好位置后 目前我们还是看不出来的,页面还是这个效果

     这个时候 我们就要定义动画了:

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

    让父级调用该动画:

    在前面main的代码中再添加调用动画的代码

    animation: rotate 5s linear infinite;

    这个时候我们就可以看到立方体开始旋转啦~

    非常有意思的小实验噢~ 大家可以试试

    以下是完整代码:

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
        .cube {
          width: 200px;
          height: 200px;
          perspective: 800px;
          margin: 100px;
        }
    
        main {
          width: 100%;
          height: 100%;
          transform: translateZ(-100px);
          transform-style: preserve-3d;
          animation: rotate 5s linear infinite;
        }
    
        @keyframes rotate {
          from {
            transform: rotateX(0) rotateY(0);
          }
    
          to {
            transform: rotateX(360deg) rotateY(360deg);
          }
        }
    
        .cube div {
          width: 100%;
          height: 100%;
          position: absolute;
        }
    
        .front {
          background: pink;
          transform: translateZ(100px);
        }
    
        .back {
          background-color: grey;
          transform: translateZ(-100px);
        }
    
        .left {
          background-color: khaki;
          transform: rotateY(90deg) translateZ(100px);
        }
    
        .right {
          background-color: lightblue;
          transform: rotateY(90deg) translateZ(-100px);
        }
    
        .top {
          background-color: lightseagreen;
          transform: rotateX(90deg) translateZ(-100px);
        }
    
        .bottom {
          background-color: lightsalmon;
          transform: rotateX(90deg) translateZ(100px);
        }
      </style>
    </head>
    
    <body>
      <div class="cube">
        <main>
          <div class="front"></div>
          <div class="back"></div>
          <div class="left"></div>
          <div class="right"></div>
          <div class="top"></div>
          <div class="bottom"></div>
        </main>
      </div>
    </body>
    
    </html>

    更多相关内容
  • 昨天看过在看完transform后,想做一个正方体的效果。昨天transform的笔记在这里源码在这里可以看到闭眼5秒钟脑子里预演了一遍大概咋写,然后就认为自己已经可以写出来了。今天强迫自己去用手给实现一遍,结果发现...

    昨天看过在看完transform后,想做一个正方体的效果。

    昨天transform的笔记在这里

    源码在这里可以看到

    闭眼5秒钟脑子里预演了一遍大概咋写,然后就认为自己已经可以写出来了。

    今天强迫自己去用手给实现一遍,结果发现

    懒惰和盲目自信又一次让自己有了“这我也会”的错觉

    第一次懵逼

    fd81da55291f?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

    发现的问题有好多:

    为什么只展现出来一个面?

    为什么动画效果显示出来的是平面

    先解决第一问题:

    先要明确一点: 要实现3d效果,在transform-origin这个属性上必须要写上第三个参数。

    给面3设置的是ratateY(180deg),在确保上面这个没问题之后,可是效果看上去这个面只是进行了翻转而并没有变远。 所以这时候要考虑是不是没有开启景深的原因

    于是给container加上 perspective:200px;

    这时候的效果图如下:

    fd81da55291f?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

    1.gif

    第一个问题解决。

    再看第二个问题:

    为什么动画效果显示出来的是一个平面?

    这个我想到了昨天笔记里的这个效果

    fd81da55291f?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

    123

    会不会也是因为在旋转container的时候,它的子元素(也就是每一个面)的3d变化都没保存所导致的。

    于是我试着在container上加了

    transform-style:preserve-3d

    效果图如下

    fd81da55291f?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

    1.gif

    意外发现那个消失的1面(正面)也显示出来了。

    第二次懵逼

    虽然是3d效果了,可是这个效果跟想象中的有点不一样啊(简直就是完全不一样)。

    想了好久,不知道问题出在了哪里。

    盯着看了好久,发现一个问题: 由于加了景深的缘故,每一个面的大小貌似已经固定。

    拿左侧右侧的两面来说:

    预期是:效果是近大远小的梯形效果,但具体形状还是矩形。

    可实际却是: 每一个面的形状已经在形成视觉效果时候便已经固定(左右两个面已经不是梯形而是矩形。)

    通过上面这个发现,猜测了下css实现景深效果的一部分原理也不知道对不对:根据几何学的公式将平面的dom转换为符合视觉效果的另一种图形从而达到景深的效果。

    举个例子就是矩形左右两侧,浏览器只是根据几何学把两个矩形变成了符合视觉预期的梯形,让立方体有里景深的效果。

    既然有了上面这个猜测,那就试着先把容器的景深给去掉

    .container{

    ---------perspective:XXX

    }

    效果如下

    fd81da55291f?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

    1.gif

    这里有没有发现一个问题:

    在一开始只有一个面3能显示出来时候,靠加景深css来让其他面展现出来,而现在却要删掉这个属性。

    而删掉这个属性后,发现页面展现并没有回到上面最开始的那个样子。

    看了下代码,发现是transform-style起了作用。这个css的作用本身就保留子元素(不是子孙元素)的3d变化。所以子元素的rotate符合预期没出现偏差。

    那现在就要考虑怎么样做,才能实现符合预期的景深效果

    具体咋做,我看了教程上的做法。但教程上并没有说为啥要这么做,很自然的这么写了

    又一次证明 啥事还是要亲自来一遍。

    既然景深会影响到子元素的transform的变换结果,那如果子元素不变换呢。

    所以试着这样写:

    在container的外面再包一层dom,然后景深的css属性放到这个dom上

    效果图如下:

    fd81da55291f?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

    1.gif

    实现真3d了,可是在旋转的时候有点怪怪的,多看几遍发现正方体的旋转点为面1的中心。而预期的效果则是围绕着正方体的中心旋转。 所以这时候可以给旋转的那个dom(也就是container)加上变换中心点的样式:

    transform-origin: center center -75px;

    这里要说的是 transform-origin:center center ???px 这里的px是多少呢。 自己试一试算一算,会发现 这里填成立方体的长的一半最合适。

    最后,看效果:

    fd81da55291f?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

    1.gif

    以上均是看妙味课程后的笔记。 妙味大法好!

    作为一个跟浏览器打交道的人,应该是很烦那种PC端完美但移动端迷之bug的情况。

    上面这个图是在PC上开发时候截的图,多完美,而下图是在ios上截的图。(安卓没出问题)

    为啥是这样子的,很烦。很烦。

    fd81da55291f?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

    Paste_Image.png

    在排查代码的时候,发现我的正面(也就是面1)没有设置rotate,因为按理说,它设置成rotate(0)和不设置在表现上是没区别的。试着给这个面也加了rotate之后,ios上的效果有所改观。

    fd81da55291f?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation

    1.gif

    这时候发现面1 的问题是已经解决了,可旋转的样子跟pc上的最终效果还是有很大差距。

    展开全文
  • 主要通过CSS3中transform属性实现,首先给元素设置成3D元素,然后定义六个面的样式再通过transform属性对其进行旋转即可实现旋转立方体效果如今随着CSS3的不断成熟和发展,我们可以利用CSS3变换样式,translateZ,...

    主要通过CSS3中transform属性实现,首先给元素设置成3D元素,然后定义六个面的样式再通过transform属性对其进行旋转即可实现旋转立方体效果

    如今随着CSS3的不断成熟和发展,我们可以利用CSS3变换样式,translateZ,rotateX,rotateY,rotateZ,径向渐变,线性渐变,透视等属性创建一个可以旋转的3D立方体。接下来在文章中将为大家具体介绍如何通过CSS3实现这个旋转立方体效果。具有一定参考价值,希望对大家有所帮助

    1856d02685720e233fa913755dfb1e80.png

    【推荐课程:CSS3教程】

    在立方体内部是六个侧面,它们被定义为单独的图形元素,每个元素具有单独的“后”,“顶”,“底”,“左”,“右”和“前”。所以首先我们要创建html代码。包含这六个元素。如下代码所示

    然后设置box的CSS属性,以及将它设置为3D元素。在这里需要注意要设置定位,目的是让六个元素可叠加在一起.box{

    position: relative;

    width:200px;

    height:200px;

    transform-style: preserve-3d;/*创造3D空间*/

    -webkit-transform-style: preserve-3d;

    transition: all 5s linear;

    }

    接下来就要设置立方体的六个面.box div{

    width:200px;

    height: 200px;

    position: absolute;

    left: 0;

    top: 0;

    transform-style: preserve-3d;

    -webkit-transform-style: preserve-3d;

    border: 1px solid #46B8DA;

    opacity: 0.5;

    }

    六个面的公共部分设置完了,接下来就要设置这六个面的3d效果,我们可以通过transform 属性来设置3D变化,它可以允许我们对元素进行旋转,移动,倾斜等.one{

    transform: rotateY(0deg) translateZ(100px);

    background-color:rgb(255,118,19);

    }

    .two{

    transform: rotateY(180deg) translateZ(100px);

    background-color:rgb(231,78,72);

    }

    .three{

    transform: rotateX(90deg) translateZ(100px);

    background-color: rgb(75,165,165);

    }

    .four{

    transform: rotateX(-90deg) translateZ(100px);

    background-color:rgb(129,182,62);

    }

    .five{

    transform: rotateY(90deg) translateZ(100px);

    background-color: rgb(255,118,19);

    }

    .six{

    transform: rotateY(-90deg) translateZ(100px);

    background-color:rgb(244,208,114);

    }

    这样我们的立方体就做好了,当鼠标移上去的时候就会发生旋转.box:hover{

    transform: rotateX(360deg) rotateY(360deg);

    -webkit-transform: rotateX(360deg) rotateY(360deg);

    }

    效果图:

    92175791079ec8624a48c65b75dcd0e7.gif

    总结:以上就是本篇文章的全部内容了,希望通过这篇文章可以让大家学会如何通过CSS3实现旋转立方体

    展开全文
  • CSS3 立方体

    2015-07-02 10:42:28
    CSS3实现3D立方体动画效果,包括animation,transition,transform等属性的使用。
  • Css制作立方体

    2020-03-08 18:15:09
    立方体它是有六个面的,并且它的每个面都是相同大小的。我们在去设置正方体的时候首先得去把它的这六个面给设置出来,这六个面它想要呈现出一个正方体的效果,那么它肯定是在一个具有空间感的父元素里面的。参考下图...

            立方体它是有六个面的,并且它的每个面都是相同大小的。我们在去设置正方体的时候首先得去把它的这六个面给设置出来,这六个面它想要呈现出一个正方体的效果,那么它肯定是在一个具有空间感的父元素里面的。参考下图图1、图2、图3

                                                                             

    图1立方体

                                                                        

    图2代码

    图3浏览器效果

            我们把父元素相对于浏览器窗口定位于居中位置,这里注意给父元素一个高度,也就是html,body。我把六个li设置成跟ul一样大小,打开浏览器它们会默认自上而下一排显示,见图4、图5

    图4代码

    图5浏览器效果

           接下来我给li一个定位,让它们都定在ul里面重叠在一起,我先给6个li分别设置不同的颜色,以便进行区分,然后让li去相对于ul的这个位置再去相对展开进行位移,见图6、图7

    图6代码

    图7浏览器效果

            在3D空间里,分别有X轴、Y轴和Z轴这三个轴。x轴就是代表水平方向的位置,y轴代表的是垂直方向的位置,z轴代表的是面对屏幕方向的位置。六个块要布局成立方体,之前我已经把六个块都定在一起了,要想把它变成立方体,首先得把它们的六个方块进行位移,位移之后再进行旋转。先参考下图图8

    图8位移旋转分析图

            我先给第二个块进行位移,第一个块我把它放在那里就不动了,第二个块我让它在视觉效果上相对于第一个块往后平移200px,也就是图8里面中间那个黑色的框,这里要注意给父元素设置3D空间,不然看不到效果,设置完成后方块2就会跑到最前面来。见图9、图10

     transform-style:属性是用来设置3D空间的        

         属性值:

               flat :    处在2D空间里   (默认值)

                preserve-3d: 处在3D空间里

    图9代码

    图10浏览器效果

           为了能够看到效果,我们给父元素设置一个鼠标滑过效果,滑过谁就给谁加过渡。我想把方块二往后移动,沿z轴正值向前,负值向后,因此,我把值改为-200px;效果见图11、图12、图13

    图11代码

    图12代码

    图13浏览器效果

            接下来来写第三个方块,第三个方块我让它往第一个方块的左边去进行位移,往左边位移就是沿着x轴,x轴里往左是负值,往右是正值,因此给个-200px,往左后还得让它与之前的第二个面接起来,所以还要让它沿y轴旋转-90度。元素默认旋转的位置是中心点,我们要把元素默认的旋转位置给改成right和center。见图14

    图14代码

           第四个方块我让它往第一个方块的右边去进行位移,给个200px,让它沿y轴旋转90度。把旋转位置改成left和center。见图15

    图15代码

           第五个方块我让它往第一个方块的上边去进行位移,给个-200px,让它沿x轴旋转90度。把旋转位置改成bottom和center。见图16

    图16代码 

            第六个方块我让它往第一个方块的下边去进行位移,给个200px,让它沿x轴旋转-90度。把旋转位置改成top和center。见图17

    图17代码

            给ul定义旋转位置,就可以让立方体沿着正中心进行旋转了。滑过效果需要手动去操作,添加 @keyframes mymove{} 给它设置循环属性,立方体就可以一直旋转了。见图18、图19

            语法一:@keyframes mymove{

                        from{初始状态属性}

                        to{结束状态属性}

                    }

            语法二:@keyframes mymove{

                        0%{初始状态属性}

                        100%{结束状态属性}

                    }      

                  0%  =   from    ;      100%   =     to

    图18代码

    图19浏览器效果

    文千千

    展开全文
  • css立方体( 原创)

    2021-06-20 03:07:36
    #preserve {width:200px;height:200px;transform-style:preserve-3d;position:fixed;top:200px;left:200px;/* transform:rotatey(45deg) rotatex(45deg);*/animation:rotate 5s infinite alternate;...
  • css立方体

    2019-12-21 21:23:01
    css立方体 先分别给立方体六个面6个div <div class="cube"> <div class="front">front</div> <div class="back">back</div> <div class="left">left</div> &...
  • 解压密码:RJ4587 之前我们为大家分享过几个基于HTML5和CSS3的3D立方体动画,比如CSS3 3D立方体...今天我们要介绍的也是一款CSS3 3D立方体图片墙,它与其他不同的是,立方体中可以嵌套小的立方体,动画效果非常不错。
  • css实现旋转正方体

    2021-11-10 15:28:54
    css实现旋转正方体 思路: 1、建一个父div作为正方体容器,在div里面建六个子div作为正方体六个面。 2、创建关键帧,让父div旋转起来。 效果: 代码: <style> /* 设置正方体容器 */ .fu { margin: 150...
  • CSS实现3D正方体动画效果,此方法是通过transform的旋转(rotate)和位移(translate)实现的,具体效果是鼠标滑过时正方体的一个面会产生位移 效果图 正文 1.基本架构 先在body里添加div作为参考,再在...
  • html+css立方体旋转展示图片示例demo。
  • 旋转立方体的效果   分析 一个容器包含6个div position:absolute 之后6个面完全重合 通过trandform:rotateX/Y/Z(),translateX/Y/Z()调整到相应位置 添加transition动画效果 注意这里面的旋转是绕着他的中心...
  • 实现一个旋转的立方体,只需要用css的基本属性就可以实现。我们一起看看吧~ 一:transform 基本属性 transform可以实现元素的2D或3D转换,可以对元素进行旋转,缩放,移动,倾斜等。 基本属性有: 1. 移动 ...
  • CSS正方体旋转

    2021-09-17 14:50:14
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta ...meta name="viewport" content="width=device-width, initial-scale=1.0">...过.
  • css3纯写的立方体

    2021-08-04 08:39:09
    .box {width:200px;height:200px;transform-style:preserve-3d;position:relative;margin:100px auto 20px;transform:rotateX(20deg) rotateY(20deg);cursor:pointer;transition:all 1s;}.box:hover {transform:rota...
  • 通过CSS3实现旋转立方体的方法发布时间:2020-08-27 14:18:45来源:亿速云阅读:78作者:小新这篇文章将为大家详细讲解有关通过CSS3实现旋转立方体的方法,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读...
  • CSS3中提出了过渡,3D模型和动画的概念今天我们使用CSS3来制作一个六棱柱的相册 下面是效果预览: https://www.bilibili.com/video/BV1Rb4y1k73C?share_source=copy_web 关于代码: 首先,我们先写出六个面,...
  • css3实现立方体效果

    2021-08-04 08:47:13
    @keyframes spin {from { transform: rotateY(0); }to { transform: rotateY(-360deg); }}@keyframes spin-vertical {from { transform: rotateX(0); }to { transform: rotateX... }}/*************** 水平立方体 *...
  • css+html+js 实现的一个旋转立方体相册,有背景音乐(自动循环播放,无需点击),音乐和照片可以替换,代码简单,小白也可以看懂并修改。非常nice!!!曾经有一份真挚的感情放在我的面前,我没有好好的珍惜,等到...
  • CSS绘制正方体

    2021-11-27 11:14:27
    <!DOCTYPE html> <html lang="en"> <head> ...meta charset="UTF-8">... /*通过fontSize设置字体大小,子元素使用em,从而通过fontSize来控制正方体的大小*/ font-size: 100px;
  • css 旋转立方体

    2021-08-05 00:12:02
    1.需要了解相关css样式1.position属性 值:relative\absolute;/* position进行定位,父元素的position属性值为relative相对定位,子元素的position属性值为absolute相对定位*/position:relative;position:absolute;2...
  • 3D立方体旋转相册.html

    2020-06-07 14:37:13
    3D立方体旋转相册,利用了CSS和HTML,换掉图片可以直接拿来用
  • css3 立方体

    2018-10-08 16:49:48
    该html代码可以实现立方体,而且该立方体是用纯css3编辑的,还可以旋转。
  • CSS3 3D立方体动画代码,3D立方体旋转动画,鼠标移动到3D立方体,拆分动画。
  • CSS3实现3D立方体

    2021-08-04 07:59:32
    利用CSS3 animation及transform实现一个404立方体盒子点击查看效果Paste_Image.png3D立方体*{margin: 0;padding: 0;}body{background: #000;}.box{width: 200px;height: 200px;margin: 200px auto 0;position: ...
  • html+css立方体特效

    2019-08-20 15:48:38
    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>长方体特效</title> <style type="text/css"> ul{ ...
  • css3动画写的立方体动画,只需要css即可实现立方体的旋转动画
  • initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>HTML + CSS 实现立方体title> <style> ul { padding: 0; margin: 0; list-style: none; margin: 260px auto; width: 300px; ...
  • 如何利用CSS3实现3D变换、立方体旋转效果,本文为大家分享实现思路,供大家参考,具体内容如下 3D变换基于几个比较重要的属性,perspective,translateZ,preserve-3d; transform-style(preserve-3d)建立3D空间 ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 6,168
精华内容 2,467
关键字:

css立方体

友情链接: PPL2303_ProliL.rar