你的位置:首页 > 网页设计

[网页设计]旋转六面体源码


应网友要求,也方便大家一起学习,在此贴出昨天编写旋转六面体源码

<!DOCTYPE html><html><head>  <meta charset="utf-8">  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">  <title>hexahedron</title>  <meta name="description" content="">  <meta name="keywords" content="">  <style type="text/css">  .hexahedron {    margin: 100px auto;    width: 200px;    height: 200px;    perspective: 1000px;    perspective-origin: 50% 50%;  }    .top,  .bottom,  .left,  .right,  .front,  .back {    position: absolute;    top: 0px;    left: 0px;    border: 1px solid #000;    width: 200px;    height: 200px;    text-align: center;    font: bold 30px/200px "microsoft yahei";    opacity: .6;    transition: 1s;  }    .top {    animation: opentop 1s both linear 0s 1;  }    .bottom {    animation: openbottom 1s both linear 1s 1;  }    .left {    animation: openleft 1s both linear 2s 1;  }    .right {    animation: openright 1s both linear 3s 1;  }    .front {    animation: openfront 1s both linear 4s 1;  }    .back {    animation: openback 1s both linear 5s 1;  }    .all {    position: relative;    width: 100%;    height: 100%;    transform-style: preserve-3d;    animation: animation 6s both linear 6s infinite;  }    .all:hover .top {    color: #fff;    background: red;  }    .all:hover .bottom {    color: #fff;    background: orange;  }    .all:hover .left {    color: #fff;    background: yellow;  }    .all:hover .right {    color: #fff;    background: green;  }    .all:hover .front {    color: #fff;    background: cyan;  }    .all:hover .back {    color: #fff;    background: blue;  }    @keyframes opentop {    0% {      transform: none;    }    100% {      transform: translateZ(-100px) rotate3d(1, 0, 0, 90deg);      transform-origin: 0 0;    }  }    @keyframes openbottom {    0% {      transform: none;    }    100% {      transform: translateZ(-100px) rotate3d(1, 0, 0, -90deg);      transform-origin: 50% 100%;    }  }    @keyframes openleft {    0% {      transform: none;    }    100% {      transform: translateZ(-100px) rotate3d(0, 1, 0, -90deg);      transform-origin: 0 0;    }  }    @keyframes openright {    0% {      transform: none;    }    100% {      transform: translateZ(-100px) rotate3d(0, 1, 0, 90deg);      transform-origin: 100% 50%;    }  }    @keyframes openfront {    0% {      transform: none;    }    100% {      transform: translateZ(100px);    }  }    @keyframes openback {    0% {      transform: none;    }    100% {      transform: translateZ(-100px);    }  }    @keyframes animation {    0% {      transform: rotate3d(0, 0, 0);    }    100% {    	/*transform: rotate3d(0,0,0,90deg);*/      transform: rotateX(180deg) rotateY(180deg) rotateZ(180deg);    }  }  </style></head><body>  <div >    <div >      <div >top</div>      <div >bottom</div>      <div >left</div>      <div >right</div>      <div >front</div>      <div >back</div>    </div>  </div></body></html>