css3 六边形

原创 2016年08月30日 19:28:07
  <!DOCTYPE html>
  <html>
  <head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
  #wrap{width: 250px;height: 250px;position: relative;margin: 30px auto;
  transition: all 10s ease-in-out;
  transform-style: preserve-3d;
  }
  #wrap div{width: 250px;height: 250px;background: red;position: absolute;
  }
  #wrap:hover{transform: rotateX(3000deg) rotateY(2000deg);}
   
  /*右边*/
  #wrap div:nth-child(1){
  background: red;
  transform: rotateY(90deg) translateZ(125px);
  }
  /*左边*/
  #wrap div:nth-child(2){
  background: yellow;
  transform: rotateY(270deg) translateZ(125px);
  }
   
  /*下面*/
  #wrap div:nth-child(3){
  background: green;
  transform: rotateX(270deg) translateZ(125px);
  }
   
  /*上面*/
  #wrap div:nth-child(4){
  background: orchid;
  transform: rotateX(90deg) translateZ(125px);
  }
   
  /*前面*/
  #wrap div:nth-child(5){
  background: pink;
  transform: translateZ(125px);
  }
   
  /*后面*/
  #wrap div:nth-child(6){
  background: lightcyan;
  transform: rotateX(180deg) translateZ(125px);
  }
  </style>
  </head>
  <body>
  <div id="wrap">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  </div>
  </body>
  </html>
版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

css3创建六边形照片墙

  • 2015-01-15 17:13
  • 413KB
  • 下载

css3画正六边形

  • 2016-08-11 11:32
  • 891B
  • 下载

css3画出六边形

原理:利用css3的transform:rotate 属性!旋转三个包含关系的长方形即可,因为子级可以继承父级的rotate属性所以用下面的方法就可以实现! 方法:父级旋转120deg,子级旋转 -...

css3实现六边形列表

最近在做六边形列表,看到老外写的一个,感觉很不错。 https://github.com/web-tiki/responsive-grid-of-hexagons demo:https://co...

css3实现六边形照片展示

总是在匆忙中不知所措,总是还未做好准备,所有的事情就已经发生。对于大多数人努力程度之低,所以根本就不用拼天赋。每天学习一点点。 今天实现的是,用css3去实现多边形的照片显示。其核心是利用css3中...

css3 3d旋转下拉菜单

  • 2017-01-10 13:24
  • 1018B
  • 下载

HTML+CSS3从入门到精通

  • 2017-08-10 10:22
  • 26.93MB
  • 下载

HTML5与CSS3学习笔记:导航栏(一)

源码 横向导航栏 body { margin: 0px; padding:

CSS3圆形时钟代码

内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)