精华内容
下载资源
问答
我要提问
  • 旋转的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立体正方形旋转的案例，希望能帮助到大家，如有问题可在下方留言，谢谢！！！

    收起
    展开全文
    css3

  • HTML5 3D正方体旋转动画 很酷的3D特效

     2019-08-23 17:12:53
    之前我们分享过很多非常不错的HTML5 3D立体动画特效，尤其是一些HTML5 Canvas动画，更是酷得让人惊叹。今天我们又要来分享一款好玩的HTML5 3D效果，该特效是一个可以旋转播放的正方体，你可以从多个视角来查看正方体...
    收起

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

     2020-09-07 19:37:50
    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>
    收起
    展开全文
    css3

  • CSS制作旋转立体正方形

     2021-03-16 08:10:29
    <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);
}

     

    收起
    展开全文
    css css3

  • 纯css样式的立体正方形特效

     2021-06-08 16:34:39
    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中canvas实现正方体的动态旋转

     2021-06-09 06:24:28
    在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: ...
    收起
    css css3

  • html5+css3实现3D正方体动画相册2种+3D旋转木马立体动画相册+表白文字加动画爱心+炫酷万花筒五件套含音乐

     2021-07-19 09:30:05
    1.html+css+jquery实现，电脑...2.3D旋转木马立体动画相册 3.3D正方体旋转动画相册2中实现方式； 第一种方式： 第二种方式： 4.表白示爱文字+动画爱心 5.炫酷万花筒动画实现，可鼠标或触屏交互 完整源码下载 ...
    收起
    css3 3d 前端 web

  • 纯CSS3超酷3D旋转立方体动画特效

     2021-06-10 16:14:26
    使用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{ ...
    收起

  • transform实现简单3D立体正方体旋转

     2021-11-28 17:35:44
    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=...
    收起
    css3

  • 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实现照片墙效果，鼠标悬浮时旋转放大并摆正

     2021-06-11 02:31:41
    一张张照片散乱的撒在一起，鼠标悬浮时旋转放大并摆正，效果如下图(所有图片均来自网络)，主要使用到的css3属性有：transition、transform(scale、rotateZ)、box-shadow以及z-index。复制代码代码如下:*{margin:0;...
    收起

  • 如何用HTML和 css做一个正方体的立体模型

     千次阅读 2018-08-01 10:29:01
    DOCTYPE html&gt;   &lt;html lang="en"&gt;   &lt;head&gt;   &lt;meta charset="UTF-8"&gt;   &lt;title&gt;Title&lt;/...
    收起

  • 旋转正方形立方体制作

     2019-01-25 10:35:40
    主要运用到动画标签：transform，旋转变形。 移动，transform: rotateX。transform: rotateY，transform: rotateZ。 &lt;!DOCTYPE html&gt; &lt;html&gt;  &lt;head&gt;  &lt;meta ...
    收起
    基础

  • css3 3d立方体两层嵌套式原地立体旋转

     2021-08-06 00:01:21
    需要用到的属性：transform-style: preserve-3d-将当前平面从2d（默认）转化为3d， transform: perspective(400px) = perspective: 400px，不过这里做正方体的时候，发现了这俩的不同， 用第二者的时候旋转之后侧边...
    收起
    css3 3d 前端

  • 3D立体方块旋转图册

     2019-04-17 16:33:00
    这个文章参考了Lazy.Cat的文章:https://www.cnblogs.com/Lazy-Cat/p/9750244.html,大家也可以去看看，他讲的还是比较详细的。 我也觉得先来效果比较吸引人啊 这里就先记录一些...
    收起

  • html+css制作3D透明立体效果

     2021-03-17 18:25:32
    今天给大家分享一下如何制作3D透明立体
    收起

  • 用CSS实现立方体360度旋转

     2019-10-24 20:11:11
    用CSS实现立方体360度旋转 <!doctype html> 超绚丽CSS3多色彩发光立方体旋转动画 ...
    收起
    CSS

  • CSS3制作转动立方体（小菜鸟）

     2021-06-19 09:32:50
    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...
    收起

  • 用HTML搭建3D立体相册网页，可放大缩小

     2021-05-11 22:51:19
    女朋友、小姐妹的生日到了，身为程序员的我们不...第一张是鼠标移开的样子，第二张是鼠标移入的样子，全称呈现的是一个正方形，可以旋转的。若是想看动态效果，可以去梦梦抖音空间去看。抖音号：liumenghui666666 ...
    收起
    vue.js css javascript

  • 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...
    收起
    css3 transform

  • 利用HTML5绘制点线面组成的3D图形的示例

     2021-06-09 02:16:31
    然后再把3D坐标转换成2D坐标，画到画布上，再通过旋转等变换效果来产生3D感。做3D一般就是由点到线，然后由线到面。【点】点的话，之前我有写过关于3D的博文解析3D标签云，其实很简单 ，这篇博文虽然讲的是用div实现...
    收起

  • 六张图片形成立方体并旋转

     2021-01-03 22:04:22
    用六张图片整合成一个立方体，加一个旋转的动画，即构成如上效果。 代码吐下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content=...
    收起
    css3

  • 一篇文章教会你利用html5和css3实现3D立方体效果图

     2021-06-09 09:00:41
    【一、项目背景】随着HTML5 CSS3的出现和发展，使得我们的网页可以实现更加复杂的效果，也使得我们的浏览体验更加丰富，所以今天我们将制作一个正方体的3D效果。【二、项目分析】想要利用CSS3实现3D立方体，就要清楚...
    收起

  • vue实现图片3D旋转效果(点击一次停止，再次点击继续，双击图片放大，再次双击大图消失)

     千次阅读 2020-06-17 15:46:01
    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