精华内容
下载资源
问答
  • 旋转的3d正方体.html
    2021-06-08 16:30:56
    Document

    * {

    padding: 0;

    margin: 0;

    }

    .box {

    width: 300px;

    height: 300px;

    margin: 30px auto;

    border: 1px solid black;

    perspective: 200px;

    }

    ul {

    width: 100px;

    height: 100px;

    margin: 100px;

    transform-style: preserve-3d;

    position: relative;

    transition: all 2s ease-in-out;

    transform-origin: center center -50px;

    }

    ul li {

    perspective: 300px;

    /* display: inline-block; */

    width: 100px;

    height: 100px;

    list-style: none;

    transform-style: preserve-3d;

    position: absolute;

    }

    ul li:nth-child(1) {

    top: 0;

    left: 0;

    background-color: red;

    }

    ul li:nth-child(2) {

    top: 0px;

    left: 100px;

    background-color: antiquewhite;

    transform-origin: left;

    transform: rotateY(90deg);

    }

    ul li:nth-child(3) {

    top: 0px;

    left: -100px;

    background-color: yellow;

    transform-origin: right;

    transform: rotateY(-90deg);

    }

    ul li:nth-child(4) {

    top: -100px;

    left: 0;

    background-color: violet;

    transform-origin: bottom;

    transform: rotateX(90deg);

    }

    ul li:nth-child(5) {

    top: 100px;

    left: 0px;

    background-color: aquamarine;

    transform: rotateX(-90deg);

    transform-origin: top;

    }

    ul li:nth-child(6) {

    top: 0px;

    left: 0px;

    transform: translateZ(-100px);

    background-color: bisque;

    }

    .box:hover ul {

    transform: rotateY(360deg);

    }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

    一键复制

    编辑

    Web IDE

    原始数据

    按行查看

    历史

    更多相关内容
  • css实现立体正方形旋转效果

    千次阅读 2020-02-29 21:59:59
    今天呢,用一段简单的代码来实现一个非常炫酷的立方体旋转的案例,主要使用的代码是css的动画以及3d的位移、旋转等属性。具体代码如下:
    	今天呢,用一段简单的代码来实现一个非常炫酷的立方体旋转的案例,主要使用的代码是css的动画以及3d的位移、旋转等属性。具体代码如下:
    

    在这里插入图片描述

    在这里插入图片描述

    在这里插入图片描述在这里插入图片描述
    以上就是使用css代码实现一个3D立体正方形旋转的案例,希望能帮助到大家,如有问题可在下方留言,谢谢!!!

    展开全文
  • 之前我们分享过很多非常不错的HTML5 3D立体动画特效,尤其是一些HTML5 Canvas动画,更是酷得让人惊叹。今天我们又要来分享一款好玩的HTML5 3D效果,该特效是一个可以旋转播放的正方体,你可以从多个视角来查看正方体...
  • CSS3 transform动画 旋转立体正方形 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">...

    CSS3 transform动画 3D旋转立体正方形

    在一个大的div里放置六个小div,分别向前后,向左右,向上下移动相等位置,再将平面div旋转,添加animation动画
    在这里插入图片描述

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>立体正方形</title>
      <style>
        #box {
          margin: 100px auto 0;
          transform-style: preserve-3d;
          width: 300px;
          height: 300px;
          border: 1px solid #ccc;
          position: relative;
          animation: zhuan 5s linear infinite;
        }
    
        @keyframes zhuan {
          from {
            transform: rotateY(0);
          }
    
          50% {
            transform: rotateY(180deg) rotateZ(45deg);
          }
    
          to {
            transform: rotateY(360deg);
          }
        }
    
        #box>div {
          width: 100%;
          height: 100%;
          position: absolute;
        }
    
        /* 前方 */
        #box>:nth-child(1) {
          background-color: lightblue;
          transform: translateZ(150px);
        }
    
        /* 右边 */
        #box>:nth-child(2) {
          background-color: lightcoral;
          transform: translateX(150px) rotateY(90deg);
        }
    
        /* 左边 */
        #box>:nth-child(3) {
          background-color: lightseagreen;
          transform: translateX(-150PX) rotateY(90deg);
        }
    
        /* 下方 */
        #box>:nth-child(4) {
          background-color: gold;
          transform: translateY(150px) rotateX(90deg);
    
        }
    
        /* 上方 */
        #box>:nth-child(5) {
          background-color: lightslategrey;
          transform: translateY(-150px) rotateX(90deg);
    
        }
    
        /* 后方 */
        #box>:nth-child(6) {
          background-color: lightgreen;
          transform: translateZ(-150px);
        }
      </style>
    </head>
    
    <body>
      <div id="box">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
      </div>
    </body>
    
    </html>
    
    展开全文
  • <div class="stage"> <div class="container"> <div class="side front">前面</div> <div class="side back">背面</div> <...div class="side right"&g...

    <div class="stage">
        <div class="container">
            <div class="side front">前面</div>
            <div class="side back">背面</div>
            <div class="side left">左面</div>
            <div class="side right">右面</div>
            <div class="side top">顶面</div>
            <div class="side bottom">底面</div>
        </div>
    </div>
    
    @keyframes spin {
        0%{
        transform:rotateY(0deg);}
        100%{
            transform: rotateY(360deg);
        }
    }
    .stage{
        perspective: 300px;
        width: 300px;
        height: 300px;
        margin: 100px auto;
        position: relative;
    }
    .container{
        transform-style: preserve-3d;
    }
    .container:hover{
        animation: spin 5s linear infinite;
    }
    .side{
        background: rgba(255,0,0,0.3);
        border: 1px solid red;
        font-size: 60px;font-weight: bold;
         height: 196px;line-height:196px;width: 196px;
         position: absolute;
         text-shadow: 0 -1px 0 rgba(0,0,0,0.2);
         text-transform: uppercase;
     }
    .front{
        transform: translateZ(100px);
    }
    .back{
        transform: rotateX(180deg)translateZ(100px);
    }
    .left{
        transform: rotateY(-90deg) translateZ(100px);
    }
    .right{
        transform: rotateY(90deg) translateZ(100px);
    }
    .top{
        transform: rotateX(90deg) translateZ(100px);
    }
    .bottom{
        transform: rotateX(-90deg) translateZ(100px);
    }

     

    展开全文
  • Document#box{width:500px;height: 500px;margin:0 auto;position: relative;transform-style: preserve-3d;animation-name: r;animation-duration: 5s;animation-timing-function: linear;animation-iteration-coun...
  • html5的画布上,画出三维图形,并且实现它动态的围着一条轴进行旋转。实现步骤:1、定义一个对象Vector3,用于存储三维的坐标2、定义一个观察点坐标和显示屏,初始化观察点的显示屏的距离(主要通过他们计算出各个...
  • HTML5 纯CSS3实现正方体旋转3D效果

    万次阅读 2020-11-27 18:52:39
    DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #aa{ margin: 100px auto; width: 200px; height: ...
  • 1.html+css+jquery实现,电脑...2.3D旋转木马立体动画相册 3.3D正方体旋转动画相册2中实现方式; 第一种方式: 第二种方式: 4.表白示爱文字+动画爱心 5.炫酷万花筒动画实现,可鼠标或触屏交互 完整源码下载 ...
  • 使用CSS3来制作动画效果已经成为WEB前端开发的一种时尚,从简单的颜色和尺寸动画,到复杂的旋转、翻转动画, CSS3 展现了它无穷的魅力。使用CSS来制作立方体动画,代码简洁易懂,效果更是令人惊叹!下面来看看制作...
  • html5+css3立体正方形效果案例

    千次阅读 2019-09-25 22:51:03
    DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> *{ padding: 0; margin: 0; } .box{ ...
  • html <div class="box-parent"> <span class="box-children">1</span> <span class="box-children">2</span> <span class="box-children">3</span> <span class=...
  • css 写正方形旋转

    2017-11-21 14:33:00
    css 写正方形旋转 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 ...
  • HTML+CSS+JS实现美女照片3D立方体旋转特效

    千次阅读 多人点赞 2021-09-09 17:14:46
    临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大?HTML网页作业无从下手?网页要求的总数量太多?没有合适的模板?等等一系列问题。你想要解决的问题,这这里都能解决
  • 一张张照片散乱的撒在一起,鼠标悬浮时旋转放大并摆正,效果如下图(所有图片均来自网络),主要使用到的css3属性有:transition、transform(scale、rotateZ)、box-shadow以及z-index。复制代码代码如下:*{margin:0;...
  • DOCTYPE html&gt;   &lt;html lang="en"&gt;   &lt;head&gt;   &lt;meta charset="UTF-8"&gt;   &lt;title&gt;Title&lt;/...
  • 主要运用到动画标签:transform,旋转变形。 移动,transform: rotateX。transform: rotateY,transform: rotateZ。 &lt;!DOCTYPE html&gt; &lt;html&gt;  &lt;head&gt;  &lt;meta ...
  • 需要用到的属性:transform-style: preserve-3d-将当前平面从2d(默认)转化为3d, transform: perspective(400px) = perspective: 400px,不过这里做正方体的时候,发现了这俩的不同, 用第二者的时候旋转之后侧边...
  • 3D立体方块旋转图册

    2019-04-17 16:33:00
    这个文章参考了Lazy.Cat的文章:https://www.cnblogs.com/Lazy-Cat/p/9750244.html,大家也可以去看看,他讲的还是比较详细的。 我也觉得先来效果比较吸引人啊 这里就先记录一些...
  • 今天给大家分享一下如何制作3D透明立体
  • 用CSS实现立方体360度旋转 <!doctype html> 超绚丽CSS3多色彩发光立方体旋转动画 ...
  • body{background: black;}.wrap{height:350px;position:relative;-webkit-transform-style: preserve-3d;-webkit-perspective: 0px;-o-transform-style: preserve-3d;-o-perspective: 0px;-moz-transform-style: pre...
  • 女朋友、小姐妹的生日到了,身为程序员的我们不...第一张是鼠标移开的样子,第二张是鼠标移入的样子,全称呈现的是一个正方形,可以旋转的。若是想看动态效果,可以去梦梦抖音空间去看。抖音号:liumenghui666666 ...
  • 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) | ...rotate:给定度数顺时针旋转 ro...
  • 然后再把3D坐标转换成2D坐标,画到画布上,再通过旋转等变换效果来产生3D感。做3D一般就是由点到线,然后由线到面。【点】点的话,之前我有写过关于3D的博文解析3D标签云,其实很简单 ,这篇博文虽然讲的是用div实现...
  • 用六张图片整合成一个立方体,加一个旋转的动画,即构成如上效果。 代码吐下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content=...
  • 【一、项目背景】随着HTML5 CSS3的出现和发展,使得我们的网页可以实现更加复杂的效果,也使得我们的浏览体验更加丰富,所以今天我们将制作一个正方体的3D效果。【二、项目分析】想要利用CSS3实现3D立方体,就要清楚...
  • DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta ...

空空如也

空空如也

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

正方形立体旋转html