精华内容
下载资源
问答
  • CSS3 正方体
    2021-08-04 06:25:59
    Document
    1
    2
    3
    4
    5
    6

    html,body{

    margin:0;

    height: 100%;

    100%;

    }

    .par{

    /*display: flex;

    justify-content:center;

    align-items:center;*/

    100%;

    height: 100%;

    transform-style:preserve-3d;

    animation:rotate 5s infinite alternate;

    }

    .par>div{

    position: absolute;

    100px;

    height: 100px;

    }

    .cld1{

    background: red;

    }

    .cld2{

    background: red;

    transform:translateZ(100px);

    }

    .cld3{

    background: yellow;

    transform:rotateY(90deg) translateZ(50px) translateX(-50px);

    }

    .cld4{

    background: yellow;

    transform:rotateY(90deg) translateZ(-50px) translateX(-50px);

    }

    .cld5{

    color: #fff;

    background: #000;

    transform:rotateX(90deg) translateZ(-50px) translateY(50px);

    }

    .cld6{

    color: #fff;

    background: #000;

    transform:rotateX(90deg) translateZ(50px) translateY(50px);

    }

    @keyframes rotate {

    0% {

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

    }

    100% {

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

    }

    }

    更多相关内容
  • CSS3 立方体

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

    2018-10-08 16:49:48
    该html代码可以实现立方体,而且该立方体是用纯css3编辑的,还可以旋转。
  • CSS3立方体3D旋转加载动画,纯CSS3代码,3D立方体组合旋转动画,3D立方体组合旋转拆分动画。
  • CSS 3D立方体制作

    2021-01-19 18:42:37
    无需JavaScript, imagery, canvas 或者SVG,就可以利用最新的CSS制作出3D立方体,这的确是一件让人难以想象的事情。 目前制作出来的效果,只有Firefox 3.5,Safari 3.2+,Google Chorme支持。下面来为大家列举出相关...
  • CSS3立方体3D旋转加载动画,纯CSS3代码,3D立方体组合旋转动画,3D立方体组合旋转拆分动画。
  • CSS3立方体旋转发光动画特效是一款纯CSS3制作的3D效果的立方体翻转特效。
  • css3立方体效果

    2018-04-13 11:16:33
    本案例是纯css3编写的一个立方体效果,适合初学者学习css3,欢迎大家下载
  •   <div class="front"></div>  <div class="back"></div>  <div class="right"></div>  <div class="left"></div> ... 这是一款纯CSS3绘制的3D立体正方形旋转动画效果,多个CSS3正方体同时旋转动画特效。
  • CSS3立方体3D翻转加载特效是一款纯CSS3制作的用于网页加载动画效果代码。
  • HTML+CSS 3D立方体拆解动画,值观视角拆解立方体;HTML+CSS实现.................................
  • CSS3 3D立方体动画代码,3D立方体旋转动画,鼠标移动到3D立方体,拆分动画。
  • CSS3立方体旋转发光动画特效是一款纯CSS3制作的3D效果的立方体翻转特效。
  • CSS3立方体3D旋转加载动画,纯CSS3代码,3D立方体组合旋转动画,3D立方体组合旋转拆分动画。
  • css3 3d立方体

    2017-01-03 15:35:28
    css3 3d 立方体
  • 非常好看的特效,只能用炫酷来形容,感兴趣就下载看看吧,用在自己的网站觉得吸引眼球!
  • 主要通过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 立方体链接特效 带3D旋转动画,响应式链接特效,鼠标放在上面,立方体就会旋转,同时链接是旋转显示出来,可上下旋转,也可左右旋转,两个都是这样的,我们可以学习用HTML5 css3技术生成立方体特效,另外是一些...
  • css3实现立方体旋转

    千次阅读 2019-05-13 12:10:39
    css3转换transform transform-origin:x y z; 定义转换元素的位置 默认50% 50% 0 transform-style:flat | preserve-3d translate:从当前位置移动 translateX(px) | translateY(px) | translateZ(px) rotate:...

    涉及知识点

    css3转换transform

    transform-origin:  x y z;    定义转换元素的位置 默认50% 50% 0

    transform-style:flat | preserve-3d

    translate:从当前位置移动 translateX(px) | translateY(px) | translateZ(px)

    rotate:给定度数顺时针旋转  rotateX(deg)| rotateY(deg) | rotateZ(deg)

    persperctive:定义元素距离试图的距离 以px记

    backface-visibility: hidden|visible  定义当前元素不面向屏幕时是否可见 --->注意元素的正反

    css3动画animation 

    1.关键帧:@keyframes name{

                       0%{ 初始状态}

                      100%{ 终态} //可以只写中间状态50%{}

    }

    2.调用动画:animation:name | duration | [ timing-function | delay | iteration-count | direction]

    css代码
            .wrapper > div{
                margin-left: 100px;
                position: relative;
                float: left;
                width: 500px;
                height: 500px;
                perspective: 5000px;
                transform-style: preserve-3d;
                transform: rotateX(-20deg) rotateY(20deg) rotateZ(20deg);
                animation: round 10s linear infinite;
            }
            
            .wrapper-left>div,
            .wrapper-right>div {
                top: 150px;
                left: 150px;
                position: absolute;
                width: 200px;
                height: 200px;
                box-sizing: border-box;
                opacity: 0.7;
                border: 1px solid #000;
                float: left;
                margin: 0 auto;
                text-align: center;
                line-height: 200px;
                font-size: 30px;
            }
            .wrapper-right>div{
                backface-visibility: hidden;
            }
            .front {
                background-color: bisque;
                transform: translateZ(100px);
            }
            .back{
                background-color: brown;
                transform: translateZ(-100px) rotateX(180deg);
            }
            .left{
                background-color: chocolate;
                transform: translateX(-100px) rotateY(-90deg);
            }
            .right{
                background-color:coral;
                transform: translateX(100px) rotateY(90deg);
            }
            .top{
                background-color: cornflowerblue;
                transform: translateY(-100px) rotateX(90deg) ;
            }
            .bottom{
                background-color: violet;
                transform: translateY(100px) rotateX(-90deg) ;
            }
    
            @keyframes round{
                0%{
                    transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg);
                }
                100%{
                    transform:  rotateX(360deg) rotateZ(360deg);
                }
            }
    html代码
    <div class="wrapper">
            <div class="wrapper-left">
                <div class="front">1</div>
                <div class="back">2</div>
                <div class="left">3</div>
                <div class="right">4</div>
                <div class="top">5</div>
                <div class="bottom">6</div>
            </div>
            <div class="wrapper-right">
                <div class="front">1</div>
                <div class="back">2</div>
                <div class="left">3</div>
                <div class="right">4</div>
                <div class="top">5</div>
                <div class="bottom">6</div>
            </div>
        </div>

     结果如下:

     

    展开全文
  • 这是一款简单又富有创意的css3立方体方块翻滚404动画特效,用来做网页404错误提示页面非常不错。
  • CSS3立方体旋转发光动画特效是一款纯CSS3制作的3D效果的立方体翻转特效。
  • css3 立方体旋转效果

    2021-06-02 16:11:35
    meta name="description" content="css3实现的3D旋转立方体盒子"> <meta charset="utf-8"> <title>旋转立方体</title> <style type="text/css"> .stage{ position: relative; ...

    效果1:

    <!DOCTYPE html>
    <html>
    <head>
    <meta name="description" content="css3实现的3D旋转立方体盒子">
      <meta charset="utf-8">
      <title>旋转立方体</title>
      <style type="text/css">
       .stage{
        position: relative;
        perspective: 800px;
        margin:248px 140px 128px 130px;
      }
      /*设置图像大小、边框、圆角、位置*/
     .container img{
        width: 144px;
        height: 140px;
        border: 5px solid #ccc;
        border-radius: 5px;
        position: absolute;
        left: 0;
        top: 0;
     }
      
     @keyframes rotate-frame{
          0% {
              transform: rotateX(0deg);
          }
          25% {
              transform: rotateX(180deg);
          }
          50% {
              transform: rotateX(360deg) rotateY(0deg);
          }
          75% {
              transform: rotateX(360deg) rotateY(180deg);
          }        
          100% {
              transform: rotateX(360deg) rotateY(360deg);
          }
      }
      .container{
          width: 450px;
          height: 450px;
          transform-style:preserve-3d;
        animation: rotate-frame 8s infinite linear;
        transform-origin: 50% 50% 75px;
        /*background: yellow;   容器屏幕背景色*/
      }
      .side{
        width: 150px;
        height: 150px;
        position: absolute;
        opacity:0.8;
        box-shadow: inset 0 0 20px rgba(0,0,0,0.9);
        text-align: center;
        line-height: 150px;
      }
      .top{
        left: 150px;
        top: 0;
        transform: rotateX(-90deg);
        transform-origin: bottom;
      }
      .bottom{
        left: 150px;
        top: 300px;
        transform: rotateX(90deg);
        transform-origin: top;
      }
      .left{
        left: 0;
        top: 150px;
        transform: rotateY(90deg);
        transform-origin: right;
      }
      .right{
        left: 300px;
        top: 150px;
        transform: rotateY(-90deg);
        transform-origin: left;
      }
      .front{
        left: 150px;
        top: 150px;
        transform: translateZ(150px);
      }
      .back{
        left: 150px;
        top: 150px;
      }
      </style>
    </head>
    <body>
    <div class="stage">
      <div class="container">
        <div class="side top"> <img src="image/1.jpg"></div>
        <div class="side bottom"> <img src="image/2.jpg"></div>
        <div class="side left"> <img src="image/3.jpg"></div>
        <div class="side right"> <img src="image/4.jpg"></div>
        <div class="side front"> <img src="image/8.jpg"></div>
        <div class="side back"> <img src="image/11.jpg"></div>
      </div>
    </div>
    </body>
    </html>

     

     

    效果2:

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>3D旋转</title>
       <style>
       *{
        padding: 0;
        margin: 0;
    }

    /*背景设置为黑色*/
    body{
        background:#000;
    }

    /*设置相册盒子大小、位置、外边框、旋转参数*/
    #photo_box{
        width: 280px;
        height: 400px;
        position: fixed;
        left: 0;
        right: 0;
        top:0;
        bottom: 0;
        margin: 200px auto;
        transform-style: preserve-3d;/*表示所有子元素在3D空间中呈现*/
        transform: rotateX(-5deg) rotateY(0deg);
        animation: run 30s linear infinite;/*循环执行run动画,每30秒执行一次*/
    }

    /*设置图像大小、边框、圆角、位置*/
    #photo_box img{
        width: 250px;
        height: 350px;
        border: 5px solid #ccc;
        border-radius: 5px;
        position: absolute;
        left: 0;
        top: 0;
    }

    /*依次设置图像盒子中每个图像旋转后位置*/
    #photo_box img:nth-child(1){
        transform: rotateY(0deg) translateZ(500px);
    }
    #photo_box img:nth-child(2){
        transform: rotateY(36deg) translateZ(500px);
    }
    #photo_box img:nth-child(3){
        transform: rotateY(72deg) translateZ(500px);
    }
    #photo_box img:nth-child(4){
        transform: rotateY(108deg) translateZ(500px);
    }
    #photo_box img:nth-child(5){
        transform: rotateY(144deg) translateZ(500px);
    }
    #photo_box img:nth-child(6){
        transform: rotateY(180deg) translateZ(500px);
    }
    #photo_box img:nth-child(7){
        transform: rotateY(216deg) translateZ(500px);
    }
    #photo_box img:nth-child(8){
        transform: rotateY(252deg) translateZ(500px);
    }
    #photo_box img:nth-child(9){
        transform: rotateY(288deg) translateZ(500px);
    }
    #photo_box img:nth-child(10){
        transform: rotateY(324deg) translateZ(500px);
    }
    #photo_box img:nth-child(11){
        transform: rotateY(360deg) translateZ(500px);
    }

    /*采用@keyframes 规则创建run动画。*/
    @keyframes run {
        0%{transform: rotateX(0deg) rotateY(0deg);
        }
        25%{transform: rotateX(10deg) rotateY(90deg);
        }
        50%{transform: rotateX(0deg) rotateY(180deg);
        }
        75%{transform: rotateX(-10deg) rotateY(270deg);
        }
        100%{transform: rotateX(0deg) rotateY(360deg);
        }
    }
       </style>

    </head>
    <body>
    <div id="photo_box">
        <img src="image/1.jpg">
        <img src="image/2.jpg">
        <img src="image/3.jpg">
        <img src="image/4.jpg">
        <img src="image/5.jpg">
        <img src="image/6.jpg">
        <img src="image/7.jpg">
        <img src="image/8.jpg">
        <img src="image/9.jpg">
        <img src="image/10.jpg">
        <img src="image/11.jpg">
        
    </div>
    </body>
    </html>

    展开全文
  • css3旋转立方体

    2018-12-30 01:18:39
    CSS3 旋转立方体的制作 transform 旋转 div 元素 transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。 perspective属性 该属性用来激活一个3D空间。 当为元素定义...
  • 如何利用CSS3实现3D变换、立方体旋转效果,本文为大家分享实现思路,供大家参考,具体内容如下 3D变换基于几个比较重要的属性,perspective,translateZ,preserve-3d; transform-style(preserve-3d)建立3D空间 ...
  • 这一款纯CSS3制作的3D旋转,位移,3D立方体多边形动画特效效果。
  • 之前我们分享过不少基于HTML5/CSS3和Canvas的3D立方体旋转动画,比如这款超绚丽CSS3多色彩发光立方体旋转动画,也有基于立方体做的菜单应用,比如超实用CSS3 3D菜单 菜单项悬浮凸出立体效果。今天我们要分享的是一款...
  • CSS实现3D正方体动画效果,此方法是通过transform的旋转(rotate)和位移(translate)实现的,具体效果是鼠标滑过时正方体的一个面会产生位移 效果图 正文 1.基本架构 先在body里添加div作为参考,再在...
  • css3 实现3D立方体的两种方法

    千次阅读 2019-05-20 13:47:16
    .div div:nth-of-type(3){ background: pink; left: 0; top: 0; } .div div:nth-of-type(4){ background: green; left: 200px; transform-origin: left ;/*圆点*/ transform: rotateY(-90deg); top: 0; ...
  • 利用CSS3做出立方体

    万次阅读 2017-08-08 20:27:51
    如何用css3做出立方体

空空如也

空空如也

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

css3 立方体