关闭

css3 六边形

53人阅读 评论(0) 收藏 举报
  <!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>
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:28718次
    • 积分:1800
    • 等级:
    • 排名:千里之外
    • 原创:128篇
    • 转载:187篇
    • 译文:1篇
    • 评论:2条
    文章分类
    最新评论