其他分享
首页 > 其他分享> > css3 六边形

css3 六边形

作者：互联网

  <!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,translateZ,125px,transform,background,wrap,div,六边形
来源： https://blog.51cto.com/u_15283585/2957247