精华内容
下载资源
问答
  • 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; ...

    CSS画正方体

    实现效果:

    正方体

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Title</title>
      <style>
          .wrapper {
              width: 50%;
              float: left;
          }
    
          .cube {
              font-size: 4em;
              width: 2em;
              margin: 1.5em auto;
              transform-style: preserve-3d;
              transform: rotateX(-35deg) rotateY(30deg);
          }
    
          .side {
              position: absolute;
              width: 2em;
              height: 2em;
              background-color: rgba(255, 99, 71, 0.6);
              border: 1px solid rgba(0, 0, 0, 0.5);
              color: white;
              text-align: center;
              line-height: 2em;
          }
    
          .front {
              transform: translateZ(1em);
          }
    
          .bottom {
              transform: rotateX(270deg) translateZ(1em);
          }
    
          .top {
              transform: rotateX(90deg) translateZ(1em);
          }
    
          .left {
              transform: rotateY(-90deg) translateZ(1em);
          }
    
          .right {
              transform: rotateY(90deg) translateZ(1em);
          }
    
          .back {
              transform: translateZ(-1em);
          }
      </style>
    </head>
    <body>
    <div class="wrapper w1">
      <div class="cube">
        <div class="side front">1</div>
        <div class="side back">6</div>
        <div class="side right">4</div>
        <div class="side left">3</div>
        <div class="side top">5</div>
        <div class="side bottom">2</div>
      </div>
    </div>
    </body>
    </html>
    
    展开全文
  • 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 ...

    我们利用transform属性。

    transform属性向元素应用2D或3D转换,该元素允许我们对元素进行旋转、缩放、移动或倾斜。

    rotateX(angle) 定义沿着 X 轴的 3D 旋转。

    rotateY(angle) 定义沿着 Y轴的 3D 旋转。

    rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。

    translateZ(z)         定义 3D 转换,只是用 Z 轴的值。

    可能比较抽象,我们先来看张图。


    • rorateX:以绿色的X轴线作为轴进行旋转。
    • rorateY:以红色的Y轴线作为轴进行旋转。
    • rorateZ:相对于在XoY这个平面进行旋转。

    想象一下,把我们的手当做中间那个网格线,现在掌心朝着自己。

    •  沿着X轴就是类似这样。沿着手腕旋转手掌。
    •  沿着Y轴就是类似这样。沿着中指为轴旋转手掌。

    • 沿Z轴就是类似这样,像刮雨器,以你的手肘为支点,旋转手臂。


    好,现在我们可以画立方体了。

    先用HTML打结构

    <div class="cube">

    <divclass="side front">1</div>

    <divclass="side back">6</div>

    <divclass="side right">4</div>

    <divclass="side left">3</div>

    <divclass="side top">5</div>

    <divclass="side bottom">2</div>

    </div>

    CSS立方体样式

    .wrapper{

         width: 50%;

        float: left;

    }

    .cube{

         font-size: 4em;

         width: 2em;

         margin: 1.5em auto;

         transform-style:preserve-3d;//使被转换的子元素保留其3D转换

         transform:rotateX(-35deg) rotateY(30deg);

    }                             

     .side{

         position: absolute;

        width: 2em;

         height: 2em;

        background: rgba(255,99,71,0.6);

        border: 1px solid rgba(0,0,0,0.5);

        color: white;

        text-align: center;

        line-height: 2em;

     }


    增加6面的样式

            .front{

                transform:translateZ(1em);

            }

            .bottom{

                transform:rotateX(-90deg)translateZ(1em);

            }

            .top{

                transform:rotateX(90deg)translateZ(1em);

            }

            .left{

                transform:rotateY(-90deg)translateZ(1em);

            }

            .right{

                transform:rotateY(90deg)translateZ(1em);

            }

            .back{

                transform:translateZ(-1em);

            }


    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>perspective</title>
    	<style>
             .wrapper{
             	width: 50%;
             	float: left;
             }
             .cube{
             	font-size: 4em;
             	width: 2em;
             	margin: 1.5em auto;
             	transform-style:preserve-3d;
             	transform:rotateX(-35deg) rotateY(30deg);
             }
             .side{
             	position: absolute;
             	width: 2em;
             	height: 2em;
             	background: rgba(255,99,71,0.6);
             	border: 1px solid rgba(0,0,0,0.5);
             	color: white;
             	text-align: center;
             	line-height: 2em;
             }
             .front{
             	transform:translateZ(1em);
             }
             .bottom{
             	transform:rotateX(-90deg) translateZ(1em);
             }
             .top{
             	transform:rotateX(90deg) translateZ(1em);
             }
             .left{
             	transform:rotateY(-90deg) translateZ(1em);
             }
             .right{
             	transform:rotateY(90deg) translateZ(1em);
             }
             .back{
             	transform:translateZ(-1em);
             }
    	</style>
    </head>
    <body>
    	<div class="wrapper w1">
    		<div class="cube">
    			<div class="side front">1</div>
    			<div class="side back">6</div>
    			<div class="side right">4</div>
    			<div class="side left">3</div>
    			<div class="side top">5</div>
    			<div class="side bottom">2</div>
    		</div>
    	</div>
    	<div class="wrapper w2">
    		<div class="cube">
    			<div class="side front">1</div>
    			<div class="side back">6</div>
    			<div class="side right">4</div>
    			<div class="side left">3</div>
    			<div class="side top">5</div>
    			<div class="side bottom">2</div>
    		</div>
    	</div>
    </body>
    </html>


    展开全文
  • 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 写旋转木马的动画

    HTML代码

     <!--旋转木马-->
        <div class="div2">
            <div class="div1">
                <img class="pic1" src="images/1.jpg" alt="">
                <img class="pic2" src="images/2.jpg" alt="">
                <img class="pic3" src="images/3.jpg" alt="">
                <img class="pic4" src="images/4.jpg" alt="">
                <img class="pic5" src="images/5.jpg" alt="">
                <img class="pic6" src="images/6.jpg" alt="">
            </div>
        </div>
        <!--正方体-->
        <div class="div3">
            <div class="div4">
                <img class="pi1" src="images/m1.png" alt="">
                <img class="pi2" src="images/m2.jpg" alt="">
                <img class="pi3" src="images/m3.jpg" alt="">
                <img class="pi4" src="images/m4.jpg" alt="">
                <img class="pi5" src="images/m5.jpg" alt="">
                <img class="pi6" src="images/m6.jpg" alt="">
            </div>
        </div>

    css部分

     body {
                background: url("images/bg4.jpg");
                background-size:cover ;
            }
            @keyframes dh {
                from{
                    transform: rotateY(0deg);
                }
                to{
                    transform: rotateY(360deg);
                }
            }
            @keyframes dh1 {
                from{
                    transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg);
                }
                to{
                    transform: rotateY(360deg) rotateX(360deg) rotateZ(360deg);
                }
            }
            .div2 {
                transform-style:preserve-3d;
                transform: rotateX(-10deg);
                position: fixed;
                margin-left: 500px;
                margin-top: 50px;
            }
    
            .div1{
                width: 300px;
                position: relative;
                transform-style:preserve-3d;
                margin: 300px auto;
                animation: dh 4s linear infinite;
            }
            .div1 img{
                width: 300px;
                height: 200px;
                position: absolute;
            }
            .pic1 { transform: rotateY(60deg) translateZ(260px);  }
            .pic2 { transform: rotateY(120deg) translateZ(260px);  }
            .pic3 { transform: rotateY(180deg) translateZ(260px);  }
            .pic4 { transform: rotateY(240deg) translateZ(260px);  }
            .pic5 { transform: rotateY(300deg) translateZ(260px);  }
            .pic6 { transform: rotateY(360deg) translateZ(260px);  }
            /*正方体*/
            .div3{
                position: fixed;
                margin-top: 126px;
                margin-left: 550px;
            }
            .div4 {
                width: 200px;
                transform-style: preserve-3d;
                animation: dh1 4s linear infinite;
    
            }
            .div4 img{
                width: 200px;
                height: 200px;
                position: absolute;
            }
            .pi1 { transform: rotateX(90deg) translateZ(100px) }
            .pi2 { transform: rotateX(90deg) translateZ(-100px) }
            .pi3 { transform: rotateY(90deg) translateZ(100px) }
            .pi4 { transform: rotateY(90deg) translateZ(-100px) }
            .pi5 { transform: translateZ(100px) }
            .pi6 { transform: translateZ(-100px) }


    展开全文
  • Document123456html,body{margin:...height: 100%;100%;}.par{/*display: flex;justify-content:center;align-items:center;*/100%;height: 100%;transform-style:preserve-3d;animation:rotate 5s infinite alterna...
  • &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head lang="en"&gt; &lt;meta charset="...正方体&lt;/title&gt; &lt;style&gt; *{ margin: 0;
  • CSS3动画之正方体

    2021-04-15 19:46:59
    css3实现正方体
  • 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:...
  • 代码如下: 上 下 右 左 前 后 代码均为原创,存在不足还请见谅! 如有转载请注明来源: www.dreamload.cn/blog/?p=503&preview=true (洋葱先生-杨少通) ...
  • css3动画——正方体旋转 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name=...
  • css3动画-正方体

    2020-05-08 11:32:05
    css属性 animation 关键帧 opacity 透明度 transform 动画 transform-style: preserve-3d; /* 重点:保留子元素的3d效果*/ perspective: 1000px; /*设置透视点*/ code <!DOCTYPE html> <...
  • css3正方体

    2015-11-20 17:22:00
    提到css3,总是感觉不太熟悉,因此还是从最简单的做起吧。 先做个正方体吧,大家都知道,正方体有6个面的。因此就按照这样子写出来吧,设置一个盒子,6个面: <style> *{ margin:0; padding:0; } ....
  • 以上使用到的css部分代码理解 浏览器查看或者尝试修改贝塞斯曲线 3D场景 以上使用到的代码 animate 开始动手 实战代码Download 快捷链接 目标实现正方体的效果 Transition 理解 transition...
  • html {background:linear-gradient(#9ed128 0%,#358b98 80...height:1000px;opacity:0.8;}.wrapper {margin-top:200px;perspective:1000px;}.cube {height:200px;width:200px;position:relative;margin:auto;transfo...
  • css实现正方体图片旋转效果目标效果基本思路代码实现主要困难 注意:(该代码暂未解决兼容性问题,在google浏览器中可顺利运行) 目标效果 鼠标移入之后,图片开始依次旋转平移,旋转平移完成后六面体开始旋转 ...
  • CSS3动画实现正方体及旋转 提示:以下是本篇文章正文内容,下面案例可供参考 一、transform是什么? 二、使用步骤 1.html 代码如下(示例): <!DOCTYPE html> <html> <head> <...
  • CSS实现3D正方体动画效果,此方法是通过transform的旋转(rotate)和位移(translate)实现的,具体效果是鼠标滑过时正方体的一个面会产生位移 效果图 正文 1.基本架构 先在body里添加div作为参考,再在...
  • /* 为了方便观察,将整个正方体进行旋转 */ transform : rotateX ( 10 deg ) rotateY ( 10 deg ) ; perspective - origin : 50 % 50 % ; animation : run 5 s linear infinite ; /* 里面可透视...
  • 出如下的图像 主要使用的方法就是transform里面的skew变形和translate移动 下面是CSS代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</...
  • CSS技术很强大,不仅仅是可以调色啊,调位置啊。 更重要的是,我们可以直接利用CSS来制作一些色彩缤纷的几何图形,同时我们还可以用神奇的代码,让这些图形自己动起来,然我们即便不能走进屏幕里的世界,也可以轻松...
  • CSS实现正方体旋转效果

    千次阅读 2019-04-03 23:51:20
    效果如图:鼠标hover到物体上时出现特效! 源码如下 <!doctype html> <html> <...超绚丽CSS3多色彩发光立方体旋转动画</title> <style> *{ margin:0 auto; ...

空空如也

空空如也

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

css画正方体