html5 css3怎么用无序列表写一个3d立体正方体，目前还没学js，所以求怎么写，来个事例，参

html-css032

html5 css3怎么用无序列表写一个3d立体正方体，目前还没学js，所以求怎么写，来个事例，参,第1张

加入正方形宽高为100px，

ul li:nth-child(1){

background-color: red

transform: translate(-100px) rotateY(90deg)

}

ul li:nth-child(2){

background-color: blue

transform: translate(100px) rotateY(90deg)

}

ul li:nth-child(3){

background-color: orange

transform: translateZ(100px)

}

ul li:nth-child(4){

background-color: green

transform: translateZ(-100px)

}

ul li:nth-child(5){

background-color: black

transform: translateY(100px) rotateX(90deg)

}

ul li:nth-child(6){

background-color: chocolate

transform: translateY(-100px) rotateX(90deg)

}

空间想象力要好，最开始所有面都重合在一起，要一个个移到指定位置形成个立方体

CSS3除了为开发者提供二维变形之外，还将动画从二维平面推动到了三维立体状态，能够实现真正的三维特效。

三维变形和二维变形一样，均使用的是transform属性。想要触发三维变形有两种方式：一种方式是通过语法告知浏览器“请采用三维方式进行变形处理”，另一种方式是直接使用CSS3三维变形的语法。

触发方法1：告知浏览器变形方式

-webkit-transform-style:preserve-3d

Tips：IE不支持三维变形，在移动端，绝大多数的浏览器均为WebKit内核，因此，在此句代码之前需要书写-webkit-的前缀内核。

Tips：不要为body元素设置-webkit- transform-style: preserve 3d,否则会对position:fixed定位的元素造成布局影响。在开发当中，如果当前元素属于body的子级元素，又希望应用三维变形，则在body和当前元素之间多嵌套一层结构，并为这层元素应用三维变形即可。

触发方法2：直接使用CSS3变形语法

<!DOCTYPE html>

<head>

    <meta charset="UTF-8">

    <title>言成科技/title>

    <style>

        .box1 {

            width: 150px

            height: 150px

            border: 2px solid blue

        }

        .box1 div {

            height: 150px

            background: rgba(0, 0, 0, 0.5)

            -webkit-transform: translate3d(30px, 60px, 20px) rotateX(30deg)

            transform: translate3d(30px, 60px, 20px) rotateX(30deg)

        }

    </style>

</head>

<body>

    <div class="box1">

        <div></div>

    </div>

</body>

</html>

具体三维变形的具体属性详见《CSS3-3D相关知识详解—视角以及变形方向》

3D效果制作

需求

制作一个立方体，并进行旋转

代码实例

<!DOCTYPE HTML>

<html>

<head>

 <meta charset="utf-8" />

 <title>言成科技</title>

 <link rel="stylesheet" type="text/css" href="https://css.h5course.cn/reset-1.0.0.css" />

 <style>

  .main-bac { -webkit-perspective:1500 } /*设定透视距离*/

  .main{

   width:200px 

   height:200px 

   margin: 0 auto

   position:relative

   -webkit-transform-style:preserve-3d

   -webkit-transition:-webkit-transform 2s ease 0s/*过渡时间*/

  }

  /*基本样式*/

  .main p{

   position: absolute 

   margin: 0 

   padding: 0 

   width: 200px 

   height: 200px  

   text-align: center 

   line-height: 200px 

   font-size: 26px 

   opacity:0.5

  }

  /*将第一个元素Z轴向前移动100px，形成第一个面（正面）*/

  .main p:nth-of-type(1) {

   background-color:red

   -webkit-transform:translateZ(100px)

  }

  /*将第一个元素Z轴向前移动100px，绕x轴旋转90度形成上面的面*/

  .main p:nth-of-type(2) {

   background-color:orange 

   -webkit-transform:rotateX(90deg) translateZ(100px)

  }

  /*将第一个元素Z轴向前移动100px，绕x轴旋转-90度形成下边的面*/

  .main p:nth-of-type(3) {

   background-color:yellow

   -webkit-transform:rotateX(-90deg) translateZ(100px)

  }

  /*将第一个元素Z轴向前移动100px，绕y轴旋转90度形成右侧的面*/

  .main p:nth-of-type(4) {

   background-color:green

   -webkit-transform:rotateY(90deg) translateZ(100px)

  }

  /*将第一个元素Z轴向前移动100px，绕y轴旋转-90度形成左侧的面*/

  .main p:nth-of-type(5) {

   background-color:#b435bf

   -webkit-transform:rotateY(-90deg) translateZ(100px)

  }

  /*将第一个元素Z轴向前移动100px，绕y轴旋转180度形成后面（背面）*/

  .main p:nth-of-type(6) {

   background-color:blue

   -webkit-transform:rotateY(180deg) translateZ(100px)

  }

  /*鼠标移入时绕Y轴旋转180度，绕Z轴旋转180度*/

  .main:hover {-webkit-transform:rotateY(180deg) rotateZ(180deg) }   

 </style>

</head>

<body>

 <div class="main-bac">

  <div class="main">

   <p>言成科技</p>

   <p>3D立方体</p>

   <p>HTML5学堂</p>

   <p>3D立方体</p>

   <p>码匠</p>

   <p>JavaScript</p>

  </div>              

 </div>

</body>

</html>

代码解析

当鼠标移入的时候，立方体逐渐的发生旋转（非突变），围绕X轴旋转45度的同时，围绕Y轴旋转45度。

当鼠标移出立方体时，立方体恢复到初始状态。在最开始状态时，并没有采用无限远的视角，设置一定的视角，让刚开始时直视立方体时，不会觉得是一个平面。

3D效果制作-目标效果图

以上资料来源：《HTML5布局之路》

说起特效来，HTML5还是很值得称道的：

1、HTML5 Canvas发光Loading动画

之前我们分享过很多基于CSS3的Loading动画效果，相信大家都很喜欢。今天我们要来分享一款基于HTML5Canvas的发光Loading加载动画特效。Loading旋转图标是在canvas画布上绘制的，整个loading动画是发光3D的视觉效果，HTML5非常强大。

2、jQuery球状放大镜特效插件

今天我们要来分享一款基于jQuery的放大镜特效插件，和其他放大镜不同的是，这款jQuery放大镜插件是球状的，看上去有3D的视觉效果。当你把鼠标滑过页面上的文字时，即会出现很酷的球状放大镜，来放大当前区域的文字。并且以球心为中心点向外文字逐渐变小，这就产生了立体感。

3、HTML5 Canvas粒子模拟效果

这是一款利用Canvas模拟出来的30000个粒子动画，当你用鼠标在canvas画布上移动时，鼠标周围的一些粒子就会跟着你移动，并形成一定的图案，就像你在玩沙画一样，效果非常不错。这里，我们应用了一些HTML5的特性，让这个粒子动画显得相当动感。

4、HTML5/CSS3带区域地图的联系表单

之前我们分享很多样式和功能各异的CSS3联系表单，比如HTML5/CSS3简易联系表单等等，都非常不错。今天我们要来分享一款功能更加强大的HTML5/CSS3联系表单，它可以选中不同区域显示相应的地图，然后针对该区域填写联系表单。

5、CSS3 3D立方体Loading加载动画特效

之前我们分享过一些HTML5和CSS3的3D立方体特效，他们都是可以旋转来展示3D立体的效果。这次分享的这款CSS3 3D立方体确是用来做Loading加载动画的，9个小立方体上下浮动，呈现波浪的效果，并且，这个Loading动画还利用了CSS3的阴影属性让这些立方体更充满3D色彩。

希望你也可以学起来呀~