精华内容
下载资源
问答
  • css3画正方体

    2021-07-13 21:03:21
    *{margin:0;} .container{ width:300px; height:200px; position:relative; perspective:1000px; margin:50px auto; } #box{ width:100%; .....
    1. *{margin:0;}

    2. .container{

    3. width:300px;

    4. height:200px;

    5. position:relative;

    6. perspective:1000px;

    7. margin:50px auto;

    8. }

    9. #box{

    10. width:100%;

    11. height:100%;

    12. position:absolute;

    13. transform-style:preserve-3d;

    14. transition:all 1.5s;

    15. }

    16. #box figure{

    17. position:absolute;

    18. font-size:120px;

    19. font-weight:bold;

    20. color:white;

    21. line-height:196px;

    22. text-align:center;

    23. border:2px solid black;

    24. transition:all 1s;

    25. }

    26. .front,.back{width:296px;height:196px;}

    27. .right,.left{width:96px;height:196px;left:100px;}

    28. .top,.bottom{width:296px;height:96px;top:50px;}

    29. .front { background: hsla( 0, 100%, 50%, 0.5 ); }

    30. .back { background: hsla( 60, 100%, 50%, 0.5 ); }

    31. .right { background: hsla( 120, 100%, 50%, 0.5 ); }

    32. .left { background: hsla( 180, 100%, 50%, 0.5 ); }

    33. .top { background: hsla( 240, 100%, 50%, 0.5 ); }

    34. .bottom { background: hsla( 300, 100%, 50%, 0.5 ); }

    35. #box:hover .front{transform:rotateY(0deg) translateZ(50px);}

    36. #box:hover .back{transform:rotateY(180deg) translateZ(50px);}

    37. #box:hover .right{transform:rotateY(90deg)translateZ(150px);}

    38. #box:hover .left{transform:rotateY(-90deg) translateZ(150px);}

    39. #box:hover .top{transform:rotateX(90deg) translateZ(100px);}

    40. #box:hover .bottom{transform:rotateX(-90deg) translateZ(100px);}

    41. #box:hover{transform:translateZ(200px);}

    展开全文
  • CSS3动画正方体3D旋转

    2017-12-15 17:43:00
    <title>test css3 @keyframes rotate{ 0%{transform:rotateX(0deg) rotateY(0deg);} 100%{transform:rotateX(360deg) rotateY(360deg);} } html {background:linear-gradient(#FF0 10%,#3F9 90%); height:...

    感谢万老师的讲课,无意中连接进入听了一下,感觉效果还不错,学习了一下。 先看效果: 输入图片说明输入图片说明 代码 如下:

    <!DocType html>
    <html>
        <head>
            <title>test css3</title>
            <style>
                @keyframes rotate{
                    0%{transform:rotateX(0deg) rotateY(0deg);}
                    100%{transform:rotateX(360deg) rotateY(360deg);}
                } 
                html {background:linear-gradient(#FF0 10%,#3F9 90%); height:100%;}
                .wrap {margin:150px auto;perspective:1000px;width:200px;height:200px;}
                .cube {margin:auto;width:200px;height:200px;position:relative;transform-style:preserve-3d;animation:rotate 20s infinite linear;}
                .cube > div{width:100%;height:100%;position:absolute;background-color:#333;opacity:.9;border:1px solid #fff;color:#fff;font-size:36px;font-family:"微软雅黑"; font-weight:bold; text-align:center;line-height:200px;transition:transform .2s ease-in;}
                .cube > span{display:block;width:100px;height:100px;border:1px solid #fff;background:#666;opacity:.8;position:absolute;top:50px;left:50px;font-size:18px;font-family:"微软雅黑"; font-weight:bold; text-align:center;line-height:100px;transition:transform .2s ease-in;}
    
                .cube > span img {width:100px;height:100px;}
                .cube > div img {width:200px;height:200px;} 
    
                .cube .out-back{transform:translateZ(-100px) rotateY(180deg);}
                .cube .out-left{transform:translateX(-100px) rotateY(-90deg);}
                .cube .out-right{transform:translateX(100px) rotateY(90deg);}
                .cube .out-top{transform:translateY(-100px) rotateX(90deg);}
                .cube .out-bottom{transform:translateY(100px) rotateX(-90deg);}
                .cube .out-front{transform:translateZ(100px); }
    
                .cube .in-back{transform:translateZ(-50px) rotateY(180deg);}
                .cube .in-left{transform:translateX(-50px) rotateY(-90deg);}
                .cube .in-right{transform:translateX(50px) rotateY(90deg);}
                .cube .in-top{transform:translateY(-50px) rotateX(90deg);}
                .cube .in-bottom{transform:translateY(50px) rotateX(-90deg);}
                .cube .in-front{transform:translateZ(50px); }
    
                .wrap:hover .cube > .out-front {color:red;transform:translateZ(200px);}
                .wrap:hover .cube > .out-back {color:red;transform:translateZ(-200px) rotateY(180deg);}
                .wrap:hover .cube > .out-left{transform:translateX(-200px) rotateY(-90deg);}
                .wrap:hover .cube > .out-right{transform:translateX(200px) rotateY(90deg);}
                .wrap:hover .cube > .out-top{transform:translateY(-200px) rotateX(90deg);}
                .wrap:hover .cube > .out-bottom{transform:translateY(200px) rotateX(-90deg);}
    
            </style>
        </head>
        <body>
            <div class="wrap">
                <div class="cube">
                    <div class="out-front">out-front</div>
                    <div class="out-back">out-back</div>
                    <div class="out-left">out-left</div>
                    <div class="out-right">out-right</div>
                    <div class="out-top">out-top</div>
                    <div class="out-bottom">out-bottom</div>
                    <span class="in-front">in-front</span>
                    <span class="in-back">in-back</span>
                    <span class="in-left">in-left</span>
                    <span class="in-right">in-right</span>
                    <span class="in-top">in-top</span>
                    <span class="in-bottom">in-bottom</span>
                </div>
            </div>
        </body>
    </html>
    

    转载于:https://my.oschina.net/janl/blog/1590597

    展开全文
  • 代码如下: 上 下 右 左 前 后 代码均为原创,存在不足还请见谅! 如有转载请注明来源: www.dreamload.cn/blog/?p=503&preview=true (洋葱先生-杨少通) ...

    代码如下:

    代码均为原创,存在不足还请见谅!

    如有转载请注明来源: www.dreamload.cn/blog/?p=503&preview=true (洋葱先生-杨少通)

    展开全文
  • transform-style: preserve-3d 属性规定如何在 3D 空间中呈现被嵌套的元素,有flat和preserve-3d两种参数,默认为... 纯CSS3动画正方体贴图小项目链接和GIF图片 https://blog.csdn.net/AIWWY/article/details/116378470

    transform-style: preserve-3d

    属性规定如何在 3D 空间中呈现被嵌套的元素,有flat和preserve-3d两种参数,默认为flat表示子元素将不保留3d位置(注意只有子元素会实现3d效果),preserve-3d相反(理解为设置后元素之间的覆盖关系将不会根据出生先后以及z-index等影响,而是通过立体几何的3d关系决定覆盖关系,且未设置时,旋转将会是只旋转覆盖关系的最后一个元素即只看见一个面的旋转)。

     

    perspective

    定义 3D 元素距视图的距离,以像素计。该属性允许改变 3D 元素查看 3D 元素的视图。当为元素定义 perspective 属性时,其子孙元素会获得透视效果,而不是元素本身,子孙元素重复时,以孙元素为主。指定了观察者与z=0平面的距离,使具有三维变换的元素产生透视效果(理解为眼睛距离浏览器屏幕的距离,在设置元素的中心向外,这里用一个别人的例子比如一个1680像素宽的显示器中有张美女图片,应用了3D transform,同时,该元素或该元素父辈元素设置的perspective大小为2000像素。则这张美女多呈现的3D效果就跟你本人在1.2个显示器宽度的地方(1680*1.2≈2000)看到的真实效果一致!,下图为设置父集perspective为1000px,子集有高600px的图片、translateZ为300px即z轴方向向外移动300px时,屏幕中图片显示为857.14的像素原因)。

     

    perspective-origin

    定义 3D 元素所基于的 X 轴和 Y 轴(需要搭配perspective使用,无法单独使用)。该属性允许改变 3D 元素的底部位置。当定义perspective -Origin属性时,会调整子孙元素的perspective而不是元素本身。实质上为元素变形的原点,默认值为 50% 50% ,该数值和后续提及的百分比默认均基于元素自身的宽高算出具体数值(在数值不是特别高的情况下即一般情况下,可以简单理解为眼睛位置的x、y方向定位,是以设置元素的左上角定点为0,0点,不设置时默认50%50%,即相当于眼睛在该元素中心点的z轴位置上,比如正对一个正方体,我们只能看得到它一个面时,当第一个参数大于50%+n时,我们就可以看见该正方体的右侧面,相当于眼睛向右侧移动了,当第二个参数大于50%+n时,我们就可以看见该正方体的底面,相当于眼睛向下侧移动了,按道理n应该为0.5但实际为0.5~0的一个值)。

     

    rotate

    如图我们首先要理解计算机的空间坐标系,它是以元素的中心(图中大的正方形可比作元素)建立x、y轴(和定位absolute中的x,y轴相同),z轴理解为从屏幕指向眼睛的方向传入度数值,表示绕X或Y或Z轴旋转,其中绕x轴旋转时,+Z向-Y方向为正方向,绕y轴旋转时,+z向+x方向为正方向,绕z轴旋转时,-Y向+X方向。注意设置时的无先后顺序,例如rotateX(30px) translateX(30deg)和translateX(30deg) rotateX(30px)是两个不同的位置,且选择的解释也不同,第一种的旋转是先translate后绕原先的X轴rotate,第二种是绕translate后绕自身的X轴旋转(原点也经过了translateX);然后子元素经过了translate后,其父元素的旋转绕的轴是原始的轴(不是自身的),即rotateX(30deg) rotateY(30deg)和rotateY(30deg) rotateX(30deg)可能表示一个位置,也可能表示不同位置,在于子元素是否该变了图形的位置。一定要注意,不然搞了贼久还以为其它的属性出了问题,写的时候最好就要注意好顺序,不同的写法顺序不同,rotateX(30deg)

    translate

    空间坐标系同上,也是分别表示向3个方向平移的像素,这里再次强调一下上面的重点:rotateX(30px) translateX(30deg)和translateX(30deg) rotateX(30px)是两个不同的位置,且旋转的解释也不同,第一种的旋转是先translate后绕原先的X轴rotate,第二种是绕translate后绕自身的X轴旋转(原点也经过了translateX);然后子元素经过了translate后,其父元素的旋转绕的轴是原始的轴(不是自身的),即rotateX(30deg) rotateY(30deg)和rotateY(30deg) rotateX(30deg)可能表示一个位置,也可能表示不同位置,在于子元素是否该变了图形的位置。

     

    纯CSS3动画正方体贴图小项目链接和GIF图片

    https://blog.csdn.net/AIWWY/article/details/116378470

    展开全文
  • CSS3动画之正方体

    2021-04-15 19:46:59
    css3实现正方体
  • CSS画正方体

    2021-08-09 16:17:35
    CSS画正方体 实现效果: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .wrapper { width: 50%; float: left; ...
  • css3动画——正方体旋转 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name=...
  • } .cld3{ background: yellow; transform:rotateY(90deg) translateZ(50px) translateX(-50px); } .cld4{ background: yellow; transform:rotateY(90deg) translateZ(-50px) translateX(-50px); } .cld5{ color: #...
  • css3动画-正方体

    2020-05-08 11:32:05
    css属性 animation 关键帧 opacity 透明度 transform 动画 transform-style: preserve-3d; /* 重点:保留子元素的3d效果*/ perspective: 1000px; /*设置透视点*/ code <!DOCTYPE html> <...
  • CSS实现3D正方体动画效果,此方法是通过transform的旋转(rotate)和位移(translate)实现的,具体效果是鼠标滑过时正方体的一个面会产生位移 效果图 正文 1.基本架构 先在body里添加div作为参考,再在...
  • 学会用css3的3d效果制作一个正方体,有助于增强我们对3d场景的旋转和位移属性的理解。下面的动态图就是利用3d旋转位移,结合动画效果制作的。感兴趣的同学可以在完成正方体的制作基础上,再去探究一下添加各种动画...
  • 提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言 一、pandas是什么? 二、使用步骤 ...3要借助辅助盒子实现 后和上 一起旋转 二、使用步骤 1.html 代码如下(示...
  • CSS3动画实现正方体及旋转 提示:以下是本篇文章正文内容,下面案例可供参考 一、transform是什么? 二、使用步骤 1.html 代码如下(示例): <!DOCTYPE html> <html> <head> <...
  • css3实现正方体动画

    千次阅读 2018-05-25 09:25:57
    < style > .box { perspective ...3 div > < div class = "d4" > 4 div > < div class = "d5" > 5 div > < div class = "d6" > 6 div > div > body > < script > script >
  • /* 为了方便观察,将整个正方体进行旋转 */ transform : rotateX ( 10 deg ) rotateY ( 10 deg ) ; perspective - origin : 50 % 50 % ; animation : run 5 s linear infinite ; /* 里面可透视...
  • css3动画效果 正方体3d旋转

    千次阅读 2017-08-15 20:12:09
    既然自己对css3有过深入了解,那还是意思意思一下吧!!<!DOCTYPE html> <title>3d旋转正方体 .box1{ width: 750px;
  • 3D正方体旋转Css3动画

    2018-08-28 10:54:39
    在早开始就学习了css3动画,但是工作原因这个动画在实际开发中却很少去使用,只是ie这个初恋实在是无法恭维,好了我在这个写了一个css3正方体的旋转动画一、主要技术剖析:html基本标签css样式的美化,还有必要的...
  • CSS_3D正方体动画

    2018-02-27 11:58:33
    &lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&...text/css"&gt; #box{width:100px; height:100px; padding:
  • css3制作正方体

    千次阅读 2016-07-26 16:36:20
    今天学习transform的时候突然奇想,想写一个正方体,然后我就跟着我的想法,写咯一个,该正方体是全部用的html5+css3实现的,只要用transform 里面的rotate(旋转)、translate(位移)等,多的就不说咯,具体的看...
  • CSS3制作正方体

    2020-09-12 19:55:45
    CSS3 3D 转换 3D 转换 CSS3 允许您使用 3D 转换来对元素进行格式化。 rotateX() x轴旋转,围绕其在一个给定度数X轴旋转的元素。 div { transform: rotateX(120deg); -webkit-transform: rotateX(120deg); /* ...
  • css3实现正方体和旋转效果

    千次阅读 2019-10-22 16:32:26
    css3实现正方体和旋转效果 实现效果图 涉及知识点 3D移动 方法:translate3d(x,y,z) 单独设置:translateX(length),translateY(length),translateZ(length) 3D旋转 方法:rotate3d(x,y,z,angle) 3D动画结果保留...
  • CSS画正方体

    千次阅读 2016-12-13 15:22:05
    好,现在我们可以立方体了。 先用HTML打结构 <divclass="side front">1 <divclass="side back">6 <divclass="side right">4 <divclass="side left">3 <divclass="side top">5 ...
  • 只是用css3 写旋转木马的动画
  • &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head lang="en"&gt; &lt;meta charset="...正方体&lt;/title&gt; &lt;style&gt; *{ margin: 0;
  • CSS3旋转正方体

    2020-01-09 21:00:34
    css3画旋转的正方体 首先,在一个同一个元素内显示图片的位置 <div class="cube"> <div class="contain"></div> <div class="contain"></div> <div class="contain"><...
  • CSS3绘制正方体旋转动画特效是一款3D立体效果不错的正方形旋转动画特效下载。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 935
精华内容 374
关键字:

css3画正方体