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实现六边形照片展示

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

CSS3 实现六边形Div图片展示效果

效果图:   实现原理: 这个效果的主要css样式有: 1.>transform: rotate(120deg); 图片旋转 2.>overflow:hidden...
  • abxn2002
  • abxn2002
  • 2014年11月05日 23:36
  • 1938

CSS实现圆角,三角,五角星,五边形,爱心,12角星,8角星,圆,椭圆,圆圈,八卦

CSS实现常用效果附源码和结果图,圆角,三角,爱心,五角星,六边形,12角星,无穷大,钻石,八边形,鸡蛋,八卦等等例子...
  • chenhongwu666
  • chenhongwu666
  • 2014年08月29日 06:43
  • 27434

css3创建六边形照片墙

  • 2015年01月15日 17:13
  • 413KB
  • 下载

css3画正六边形

  • 2016年08月11日 11:32
  • 891B
  • 下载

css3画出六边形

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

css3实现六边形列表

最近在做六边形列表,看到老外写的一个,感觉很不错。 https://github.com/web-tiki/responsive-grid-of-hexagons demo:https://co...
  • wuyt2008
  • wuyt2008
  • 2016年11月11日 16:37
  • 1211

css3实现六边形照片展示

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

CSS3 实现六边形Div图片展示效果

效果图:   实现原理: 这个效果的主要css样式有: 1.>transform: rotate(120deg); 图片旋转 2.>overflow:hidden...
  • guduruhuan2
  • guduruhuan2
  • 2014年11月01日 11:41
  • 587

HTML5与CSS3权威指南第三版 源码

  • 2018年01月16日 18:03
  • 72.19MB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css3 六边形
举报原因:
原因补充:

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