CSS3 旋转的立方体轮廓

Wireframe of Cube

cube, wireframe

《three.js如何实现贴图模糊效果 - 使用canvas》申请公开！

第三方库
作品简介 1857
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body {
  background-color: #0b2331;
  font-family: Helvetica, sans-serif; }

.cube, .half1, .half2, .container, .side {
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d; }

.container {
  position: relative;
  width: 800px;
  height: 800px;
  margin: 0 auto;
  z-index: -999;
  text-align: center;
  -webkit-perspective: 40000px;
  -moz-perspective: 40000px;
  perspective: 40000px; }

.hoverme {
  display: inline-block;
  background: #ccc;
  padding: 20px;
  font-size: 1em;
  cursor: pointer;
  opacity: 0.9;
  position: fixed;
  z-index: 999;
  left: 0;
  top: 0;
  -webkit-transition: all 10ms ease-in-out;
  -moz-transition: all 10ms ease-in-out;
  transition: all 10ms ease-in-out; }

.hoverme:hover {
  opacity: 1; }

.hoverme:hover ~ .container .cube .side:after {
  -webkit-transform: translate3d(-50%, -50%, 0) rotate(45deg);
  -moz-transform: translate3d(-50%, -50%, 0) rotate(45deg);
  -ms-transform: translate3d(-50%, -50%, 0) rotate(45deg);
  -o-transform: translate3d(-50%, -50%, 0) rotate(45deg);
  transform: translate3d(-50%, -50%, 0) rotate(45deg); }

.hoverme:hover ~ .container .cube .side:before {
  -webkit-transform: translate3d(-50%, -50%, 0) rotate(45deg);
  -moz-transform: translate3d(-50%, -50%, 0) rotate(45deg);
  -ms-transform: translate3d(-50%, -50%, 0) rotate(45deg);
  -o-transform: translate3d(-50%, -50%, 0) rotate(45deg);
  transform: translate3d(-50%, -50%, 0) rotate(45deg); }

.cube {
  margin-top: -100px;
  width: 800px;
  height: 800px;
  -webkit-transform: rotateX(185deg) rotateY(0deg) rotateZ(45deg);
  -moz-transform: rotateX(185deg) rotateY(0deg) rotateZ(45deg);
  -ms-transform: rotateX(185deg) rotateY(0deg) rotateZ(45deg);
  -o-transform: rotateX(185deg) rotateY(0deg) rotateZ(45deg);
  transform: rotateX(185deg) rotateY(0deg) rotateZ(45deg);
  -webkit-transform-origin: center;
  -moz-transform-origin: center;
  -ms-transform-origin: center;
  -o-transform-origin: center;
  transform-origin: center;
  -webkit-animation: cube 5s forwards infinite;
  -moz-animation: cube 5s forwards infinite;
  animation: cube 5s forwards infinite;
  -webkit-animation-timing-function: cubic-bezier(0.97, 1, 0.66, 0.9);
  -moz-animation-timing-function: cubic-bezier(0.97, 1, 0.66, 0.9);
  animation-timing-function: cubic-bezier(0.97, 1, 0.66, 0.9); }

.half1 {
  height: 320px;
  top: 0;
  position: absolute;
  -webkit-transform: rotateX(-90deg);
  -moz-transform: rotateX(-90deg);
  -ms-transform: rotateX(-90deg);
  -o-transform: rotateX(-90deg);
  transform: rotateX(-90deg);
  -webkit-transform-origin: 50% 100%;
  -moz-transform-origin: 50% 100%;
  -ms-transform-origin: 50% 100%;
  -o-transform-origin: 50% 100%;
  transform-origin: 50% 100%; }

.side {
  width: 160px;
  height: 160px;
  border: 1px solid #fff;
  background: transparent;
  position: absolute;
  overflow: hidden;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

.side:after {
  content: '';
  position: absolute;
  height: 2px;
  width: 400px;
  background: #fff;
  left: 50%;
  top: 50%;
  -webkit-transform: translate3d(-50%, -50%, 0);
  -moz-transform: translate3d(-50%, -50%, 0);
  -ms-transform: translate3d(-50%, -50%, 0);
  -o-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);
  -webkit-transform-origin: center center;
  -moz-transform-origin: center center;
  -ms-transform-origin: center center;
  -o-transform-origin: center center;
  transform-origin: center center;
  -webkit-transition: all 400ms ease-in-out;
  -moz-transition: all 400ms ease-in-out;
  transition: all 400ms ease-in-out; }

.side:before {
  content: '';
  position: absolute;
  width: 2px;
  height: 400px;
  background: #fff;
  left: 50%;
  top: 50%;
  -webkit-transform: translate3d(-50%, -50%, 0);
  -moz-transform: translate3d(-50%, -50%, 0);
  -ms-transform: translate3d(-50%, -50%, 0);
  -o-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);
  -webkit-transform-origin: center center;
  -moz-transform-origin: center center;
  -ms-transform-origin: center center;
  -o-transform-origin: center center;
  transform-origin: center center;
  -webkit-transition: all 400ms ease-in-out;
  -moz-transition: all 400ms ease-in-out;
  transition: all 400ms ease-in-out; }

.s1 {
  top: 0;
  left: 320px;
  -webkit-transform-origin: 50% 100%;
  -moz-transform-origin: 50% 100%;
  -ms-transform-origin: 50% 100%;
  -o-transform-origin: 50% 100%;
  transform-origin: 50% 100%;
  -webkit-transform: rotateX(-90deg);
  -moz-transform: rotateX(-90deg);
  -ms-transform: rotateX(-90deg);
  -o-transform: rotateX(-90deg);
  transform: rotateX(-90deg); }

.s2 {
  top: 160px;
  left: 320px;
  -webkit-transform-origin: 50% 0%;
  -moz-transform-origin: 50% 0%;
  -ms-transform-origin: 50% 0%;
  -o-transform-origin: 50% 0%;
  transform-origin: 50% 0%; }

.s3 {
  top: 320px;
  left: 320px;
  -webkit-transform-origin: 50% 0%;
  -moz-transform-origin: 50% 0%;
  -ms-transform-origin: 50% 0%;
  -o-transform-origin: 50% 0%;
  transform-origin: 50% 0%; }

.s4 {
  top: 480px;
  left: 320px;
  -webkit-transform-origin: 50% 0%;
  -moz-transform-origin: 50% 0%;
  -ms-transform-origin: 50% 0%;
  -o-transform-origin: 50% 0%;
  transform-origin: 50% 0%;
  -webkit-transform: rotateX(90deg);
  -moz-transform: rotateX(90deg);
  -ms-transform: rotateX(90deg);
  -o-transform: rotateX(90deg);
  transform: rotateX(90deg); }

.s5 {
  left: 160px;
  top: 160px;
  -webkit-transform-origin: 100% 50%;
  -moz-transform-origin: 100% 50%;
  -ms-transform-origin: 100% 50%;
  -o-transform-origin: 100% 50%;
  transform-origin: 100% 50%;
  -webkit-transform: rotateY(90deg);
  -moz-transform: rotateY(90deg);
  -ms-transform: rotateY(90deg);
  -o-transform: rotateY(90deg);
  transform: rotateY(90deg); }

.s6 {
  left: 480px;
  top: 320px;
  -webkit-transform-origin: 0% 50%;
  -moz-transform-origin: 0% 50%;
  -ms-transform-origin: 0% 50%;
  -o-transform-origin: 0% 50%;
  transform-origin: 0% 50%;
  -webkit-transform: rotateY(-90deg);
  -moz-transform: rotateY(-90deg);
  -ms-transform: rotateY(-90deg);
  -o-transform: rotateY(-90deg);
  transform: rotateY(-90deg); }

@-webkit-keyframes cube {
  0% {
    -webkit-transform: rotateX(55deg) rotateY(0deg) rotateZ(45deg);
    -moz-transform: rotateX(55deg) rotateY(0deg) rotateZ(45deg);
    -ms-transform: rotateX(55deg) rotateY(0deg) rotateZ(45deg);
    -o-transform: rotateX(55deg) rotateY(0deg) rotateZ(45deg);
    transform: rotateX(55deg) rotateY(0deg) rotateZ(45deg); }

12.5% {
    -webkit-transform: rotateX(55deg) rotateY(0deg) rotateZ(45deg);
    -moz-transform: rotateX(55deg) rotateY(0deg) rotateZ(45deg);
    -ms-transform: rotateX(55deg) rotateY(0deg) rotateZ(45deg);
    -o-transform: rotateX(55deg) rotateY(0deg) rotateZ(45deg);
    transform: rotateX(55deg) rotateY(0deg) rotateZ(45deg); }

25% {
    -webkit-transform: rotateX(55deg) rotateY(0deg) rotateZ(135deg);
    -moz-transform: rotateX(55deg) rotateY(0deg) rotateZ(135deg);
    -ms-transform: rotateX(55deg) rotateY(0deg) rotateZ(135deg);
    -o-transform: rotateX(55deg) rotateY(0deg) rotateZ(135deg);
    transform: rotateX(55deg) rotateY(0deg) rotateZ(135deg); }

37.5% {
    -webkit-transform: rotateX(55deg) rotateY(0deg) rotateZ(135deg);
    -moz-transform: rotateX(55deg) rotateY(0deg) rotateZ(135deg);
    -ms-transform: rotateX(55deg) rotateY(0deg) rotateZ(135deg);
    -o-transform: rotateX(55deg) rotateY(0deg) rotateZ(135deg);
    transform: rotateX(55deg) rotateY(0deg) rotateZ(135deg); }

50% {
    -webkit-transform: rotateX(125deg) rotateY(0deg) rotateZ(135deg);
    -moz-transform: rotateX(125deg) rotateY(0deg) rotateZ(135deg);
    -ms-transform: rotateX(125deg) rotateY(0deg) rotateZ(135deg);
    -o-transform: rotateX(125deg) rotateY(0deg) rotateZ(135deg);
    transform: rotateX(125deg) rotateY(0deg) rotateZ(135deg); }

62.5% {
    -webkit-transform: rotateX(125deg) rotateY(0deg) rotateZ(135deg);
    -moz-transform: rotateX(125deg) rotateY(0deg) rotateZ(135deg);
    -ms-transform: rotateX(125deg) rotateY(0deg) rotateZ(135deg);
    -o-transform: rotateX(125deg) rotateY(0deg) rotateZ(135deg);
    transform: rotateX(125deg) rotateY(0deg) rotateZ(135deg); }

75% {
    -webkit-transform: rotateX(125deg) rotateY(0deg) rotateZ(45deg);
    -moz-transform: rotateX(125deg) rotateY(0deg) rotateZ(45deg);
    -ms-transform: rotateX(125deg) rotateY(0deg) rotateZ(45deg);
    -o-transform: rotateX(125deg) rotateY(0deg) rotateZ(45deg);
    transform: rotateX(125deg) rotateY(0deg) rotateZ(45deg); }

87.5% {
    -webkit-transform: rotateX(125deg) rotateY(0deg) rotateZ(45deg);
    -moz-transform: rotateX(125deg) rotateY(0deg) rotateZ(45deg);
    -ms-transform: rotateX(125deg) rotateY(0deg) rotateZ(45deg);
    -o-transform: rotateX(125deg) rotateY(0deg) rotateZ(45deg);
    transform: rotateX(125deg) rotateY(0deg) rotateZ(45deg); }

100% {
    -webkit-transform: rotateX(55deg) rotateY(0deg) rotateZ(45deg);
    -moz-transform: rotateX(55deg) rotateY(0deg) rotateZ(45deg);
    -ms-transform: rotateX(55deg) rotateY(0deg) rotateZ(45deg);
    -o-transform: rotateX(55deg) rotateY(0deg) rotateZ(45deg);
    transform: rotateX(55deg) rotateY(0deg) rotateZ(45deg); } }

@-moz-keyframes cube {
  0% {
    -webkit-transform: rotateX(55deg) rotateY(0deg) rotateZ(45deg);
    -moz-transform: rotateX(55deg) rotateY(0deg) rotateZ(45deg);
    -ms-transform: rotateX(55deg) rotateY(0deg) rotateZ(45deg);
    -o-transform: rotateX(55deg) rotateY(0deg) rotateZ(45deg);
    transform: rotateX(55deg) rotateY(0deg) rotateZ(45deg); }

@-o-keyframes cube {
  0% {
    -webkit-transform: rotateX(55deg) rotateY(0deg) rotateZ(45deg);
    -moz-transform: rotateX(55deg) rotateY(0deg) rotateZ(45deg);
    -ms-transform: rotateX(55deg) rotateY(0deg) rotateZ(45deg);
    -o-transform: rotateX(55deg) rotateY(0deg) rotateZ(45deg);
    transform: rotateX(55deg) rotateY(0deg) rotateZ(45deg); }

@keyframes cube {
  0% {
    -webkit-transform: rotateX(55deg) rotateY(0deg) rotateZ(45deg);
    -moz-transform: rotateX(55deg) rotateY(0deg) rotateZ(45deg);
    -ms-transform: rotateX(55deg) rotateY(0deg) rotateZ(45deg);
    -o-transform: rotateX(55deg) rotateY(0deg) rotateZ(45deg);
    transform: rotateX(55deg) rotateY(0deg) rotateZ(45deg); }

HTML

Wireframe of Cube

cube, wireframe

编辑器支持Emmet

快捷键

Wireframe of Cube

cube, wireframe

CSS3 立方体表面的渐变色彩波动

HTML5 CSS3极富创意的立方体游泳动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：