精华内容
下载资源
问答
  • CSS3绘制正方体旋转动画特效是一款3D立体效果不错的正方形旋转动画特效下载。
  • CSS3绘制正方体旋转动画特效是一款3D立体效果不错的正方形旋转动画特效下载。
  • CSS3绘制正方体旋转动画特效是一款3D立体效果不错的正方形旋转动画特效下载。
  • 这是一款纯CSS3绘制的3D立体正方形旋转动画效果,多个CSS3正方体同时旋转动画特效。
  • css正方体旋转

    2019-09-20 15:10:05
    css内容 <style> * { margin: 0; padding: 0; } ._a_ { width: 100%; height: 300px; } .box { width: 200px; height: 200px;...

    css内容

    <style>
    
        * {
            margin: 0;
            padding: 0;
        }
        
        .d1 {
            width: 100%;
            height: 300px;
        }
        
        .box {
            width: 200px;
            height: 200px;
            margin: 0px auto;
            position: relative;
            transform-style: preserve-3d;
            animation: change 10s linear infinite alternate;
        }
        
        .box>div {
            width: 200px;
            height: 200px;
            /* background: darkturquoise; */
            position: absolute;
            transition: all 3s;
        }
        
        .box:hover>div {
            width: 300px;
            height: 300px;
        }
        /* .box:hover>.even {
            transform: translateZ(120px);
        }
        .box:hover>.odd {
            transform: translateZ(-120px);
        } */
        
        .box:hover>.tx1 {
            transform: rotateX(90deg) translateZ(170px);
        }
        
        .box:hover>.tx2 {
            transform: rotateX(90deg) translateZ(-170px);
        }
        
        .box:hover>.ty3 {
            transform: rotateY(90deg) translateZ(170px);
        }
        
        .box:hover>.ty4 {
            transform: rotateY(90deg) translateZ(-170px);
        }
        
        .box:hover>.tz5 {
            transform: rotateZ(90deg) translateZ(170px);
        }
        
        .box:hover>.tz6 {
            transform: rotateZ(90deg) translateZ(-170px);
        }
        
        .box>div:nth-child(1) {
            /* background: url("pic1.jpg") no-repeat center;
            background-size: cover; */
            /*可更换成图片,现在变更为渐变色代替*/
            background: linear-gradient(45deg, red, orange);
            transform: rotateX(90deg) translateZ(100px);
        }
        
        .box>div:nth-child(2) {
            /* background: url("pic2.jpg") no-repeat center;
            background-size: cover; */
            /*可更换成图片,现在变更为渐变色代替*/
            background: linear-gradient(45deg, orange, yellow);
            transform: rotateX(90deg) translateZ(-100px);
        }
        
        .box>div:nth-child(3) {
            /* background: url("pic3.jpg") no-repeat center;
            background-size: cover; */
            /*可更换成图片,现在变更为渐变色代替*/
            background: linear-gradient(45deg, yellow, green);
            transform: rotateY(90deg) translateZ(100px);
        }
        
        .box>div:nth-child(4) {
            /* background: url("pic4.jpg") no-repeat center;
            background-size: cover; */
            /*可更换成图片,现在变更为渐变色代替*/
            background: linear-gradient(45deg, green, blue);
            transform: rotateY(90deg) translateZ(-100px);
        }
        
        .box>div:nth-child(5) {
            /* background: url("pic5.jpg") no-repeat center;
            background-size: cover; */
            /*可更换成图片,现在变更为渐变色代替*/
            background: linear-gradient(45deg, blue, #065279);
            transform: translateZ(100px);
        }
        
        .box>div:nth-child(6) {
            /* background: url("pic6.jpg") no-repeat center;
            background-size: cover; */
            /*可更换成图片,现在变更为渐变色代替*/
            background: linear-gradient(45deg, #065279, purple);
            transform: translateZ(-100px);
        }
        
        @keyframes change {
            0% {
                transform: rotateX(45deg) rotateZ(30deg);
            }
            25% {
                transform: rotateX(111deg) rotateY(30deg);
            }
            60% {
                transform: rotateZ(135deg) rotateZ(70deg);
            }
            100% {
                transform: rotateY(205deg) rotateZ(200deg);
            }
        }
    </style>
    

    html内容

    <!-- 空出一段高度 -->
    <div class="d1"></div>
    <!-- 正方体旋转 -->
    <div class="box">
        <div class="even tx1"></div>
        <div class="odd tx2"></div>
        <div class="even ty3"></div>
        <div class="odd ty4"></div>
        <div class="even tz5"></div>
        <div class="odd tz6"></div>
    </div>
    
    展开全文
  • 只是用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) }


    展开全文
  • 效果: <!doctype html> <html> <head>...正方体旋转动画</title> <style> *{ margin:0 auto; padding:0; } html{ background:#222; } div.wrap{ width:200px;

    效果:
    在这里插入图片描述

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>正方体旋转动画</title>
     
    <style>
    *{
          margin:0 auto;
          padding:0;
        }
        html{
          background:#222;
        }
        div.wrap{
          width:200px;
          perspective:1000px;/*景深*/
          position:absolute;
          left:50%;
          top:50%;
          transform: translateX(-50%) translateY(-50%);/*利用位移来处理垂直水平居中*/
        }
        .wrap>div.cube{
          margin: 0 auto;
          width:200px;
          height:200px;
          position:relative;
          transform-style: preserve-3d;
          transform:rotateX(-50deg) rotateY(-50deg) rotateZ(0deg);/*旋转*/
          animation:move 8s infinite linear;/*动画*/
        }
        /*关键帧*/
        @keyframes move{
          0% {
            transform: rotateX(0deg) rotateY(0deg);
          }
          100% {
            transform: rotateX(360deg) rotateY(360deg);
          }
        }
        .cube>div{
          width:100%;
          height:100%;
          border-radius:20px;
          position:absolute;
          box-shadow:0 0 10px currentColor;/*currentColor关键字的使用值是 color 属性值的计算值*/
          transition: background 0.4s ease-in-out, box-shadow 0.4s ease-in-out;/*过渡 属性 时间 过渡曲线*/
        }
        .cube:hover>div{
          background:currentColor;
          box-shadow:0 0 20px currentColor;
        }
        .cube div.out-front{
          color: deeppink;
          transform:translateZ(100px);/*转换  位移*/
        }
        .cube div.out-back{
          color: seagreen;
          transform:translateZ(-100px) rotateY(180deg);/*转换 位移 旋转*/
        }
        .cube div.out-left{
          color: skyblue;
          transform:translateX(-100px) rotateY(-90deg);
        }
        .cube div.out-right{
          color: lightcoral;
          transform:translateX(100px) rotateY(90deg);
        }
        .cube div.out-top{
          color: mediumseagreen;
          transform:translateY(-100px) rotateX(90deg);
        }
        .cube div.out-bottom{
          color: dodgerblue;
          transform:translateY(100px) rotateX(-90deg);
        }
    	.cube img.pic{
    	   width:200px;
    	   height:200px;
    	}
    </style>
    </head>
    <body>
    </div>
          <div class="wrap">
              <div class="cube">
                <div class="out-front"><img src="https://files-cdn.cnblogs.com/files/cjsblog/cube01.bmp" class="pic"></div>
                <div class="out-back"><img src="https://files-cdn.cnblogs.com/files/cjsblog/cube02.bmp" class="pic"></div>
                <div class="out-left"><img src="https://files-cdn.cnblogs.com/files/cjsblog/cube03.bmp" class="pic"></div>
                <div class="out-right"><img src="https://files-cdn.cnblogs.com/files/cjsblog/cube04.bmp" class="pic"></div>
                <div class="out-top"><img src="https://files-cdn.cnblogs.com/files/cjsblog/cube05.bmp" class="pic"></div>
                <div class="out-bottom"><img src="https://files-cdn.cnblogs.com/files/cjsblog/cube06.bmp" class="pic"></div>
              </div>
          </div>
        </body>
    </html>
    
    展开全文
  •   <div class="front"></div>  <div class="back"></div>  <div class="right"></div>  <div class="left"></div> ... 这是一款纯CSS3绘制的3D立体正方形旋转动画效果,多个CSS3正方体同时旋转动画特效。
  • 3D正方体旋转Css3动画

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

    在早开始就学习了css3动画,但是工作原因这个动画在实际开发中却很少去使用,只是ie这个初恋实在是无法恭维,好了我在这个写了一个css3正方体的旋转动画

    一、主要技术剖析:

    1. html基本标签

    2. css样式的美化,还有必要的定位元素

    3. 运用了css3的舞台元素

    4. css3的keyframes动画

    5. css3的旋转位移

    二、html标签

    <div class="box">    
        <ul>         
           <li>1</li>    
           <li>2</li>                
           <li>3</li>     
           <li>4</li>             
           <li>5</li>          
           <li>6</li>         
        </ul>  
    </div>

    三、css样式美化

        *{    
        margin:0;   
        padding: 0; 
        list-style: none;
         }
       .box ul{  
        position: relative; 
        width: 100px;  
        height: 100px; 
        margin:200px auto;  
        /*transform:perspective(500px) rotateY(-45deg);*/  
        transform-style: preserve-3d;  
        animation: rout 30s infinite linear;
      }
      .box ul li{  
        width: 100px;  
        height: 100px; 
        text-align: center;  
        line-height: 100px;  
        position: absolute;
      }
      .box ul li:nth-child(1){   
        background: #000;  
        color: #fff;   
        left: -100px;   
        transform-origin: right;  
        transform: rotateY(90deg);
      }
      .box ul li:nth-child(2){   
        background: #000;    
        color: #fff;
      }
      .box ul li:nth-child(3){  
        background: #000;   
        color: #fff;    
        top: -100px;  
        transform-origin: bottom;  
        transform: rotateX(-90deg);
      }
      .box ul li:nth-child(4){   
        background: #000;  
        color: #fff; 
        right: -100px; 
        transform-origin: left;  
        transform: rotateY(-90deg);
      }
      .box ul li:nth-child(5){  
        background: #000;   
        color: #fff;    
        top: 100px;    
        left: 0;   
        transform-origin: top; 
        transform: rotateX(90deg);
      }
      .box ul li:nth-child(6){    
        background: #f00;   
        color: #fff;   
        left: 0;    
        top: 0;    
        transform: translateZ(100px);
      }

    四、keyframes

    @keyframes rout{   
     0%{      
       transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg);  
      }   
     100%{      
       transform: rotateY(360deg) rotateX(360deg) rotateZ(0deg); 
      }
    }

    最后大功告成!

    QQ截图20180828104616.png

    展开全文
  • css3动画——正方体旋转 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name=...
  • /* 为了方便观察,将整个正方体进行旋转 */ transform : rotateX ( 10 deg ) rotateY ( 10 deg ) ; perspective - origin : 50 % 50 % ; animation : run 5 s linear infinite ; /* 里面可透视...
  • CSS实现正方体旋转效果

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

    2015-04-27 20:45:00
    <div class="contain"> <div class="box"> <div class="face one"> </div> <div class="face two"> </div> <div class="face three"> <......
  • CSS3制作3D骰子旋转动画特效是一款鼠标移动控制正方体旋转动画特效。
  • CSS代码 JS代码 简洁版(不带解释) HTML代码 CSS代码 JS代码 项目实现图片GIF 项目思想 详细版(带大量解释) HTML代码 <!DOCTYPE html> <html lang="en"> <head> <meta ...
  • CSS3动画实现正方体旋转 提示:以下是本篇文章正文内容,下面案例可供参考 一、transform是什么? 二、使用步骤 1.html 代码如下(示例): <!DOCTYPE html> <html> <head> <...
  • CSS-3D正方体旋转

    2019-09-24 09:23:51
    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <...3D旋转正方体</title> <style type="text/css"> body{width: 100%;} *{margin: 0px;padding: 0p...
  • <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>css3旋转立方体效果</title> <style type="text/css"> *{ ...
  • 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> <... ...旋转立方体<...style type="text/css"> .container{ width: 100%; height: 1000px; background-color: #f5f5f5; padding-
  • css3动画效果 正方体3d旋转

    千次阅读 2017-08-15 20:12:09
    既然自己对css3有过深入了解,那还是意思意思一下吧!!<!DOCTYPE html> <title>3d旋转正方体 .box1{ width: 750px;
  • -- 正方体旋转 --> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>正方体
  • /* 旋转动画 */ animation: spin 10s linear 0s infinite; } /* 外大正方体 */ .cube>div { position: absolute; width: 200px; height: 200px; left: 0; top: 0; /* transition里主要包括四个属性值: ...
  • CSS3制作3D骰子旋转动画特效是一款鼠标移动控制正方体旋转动画特效。
  • css实现正方体图片旋转效果目标效果基本思路代码实现主要困难 注意:(该代码暂未解决兼容性问题,在google浏览器中可顺利运行) 目标效果 鼠标移入之后,图片开始依次旋转平移,旋转平移完成后六面体开始旋转 ...
  • CSS3制作3D骰子旋转动画特效是一款鼠标移动控制正方体旋转动画特效。

空空如也

空空如也

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

css正方体旋转动画