变换的3d立方体

下载代码

html

css

分享到微信朋友圈

html

css

@-webkit-keyframes blockSlide {
  0% {
    -webkit-transform: translateX(-133.33333px) rotateX(90deg);
            transform: translateX(-133.33333px) rotateX(90deg);
    opacity: 1;
  }
  25% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
    opacity: 0.2;
  }
  75% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(133.33333px) rotateX(-90deg);
            transform: translateX(133.33333px) rotateX(-90deg);
    opacity: 1;
  }
}
@keyframes blockSlide {
  0% {
    -webkit-transform: translateX(-133.33333px) rotateX(90deg);
            transform: translateX(-133.33333px) rotateX(90deg);
    opacity: 1;
  }
  25% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
    opacity: 0.2;
  }
  75% {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(133.33333px) rotateX(-90deg);
            transform: translateX(133.33333px) rotateX(-90deg);
    opacity: 1;
  }
}
@-webkit-keyframes startSpin {
  0% {
    opacity: 0;
    -webkit-transform: rotateY(0deg) rotateX(0deg);
            transform: rotateY(0deg) rotateX(0deg);
  }
  100% {
    opacity: 1;
    -webkit-transform: rotateY(360deg) rotateX(360deg);
            transform: rotateY(360deg) rotateX(360deg);
  }
}
@keyframes startSpin {
  0% {
    opacity: 0;
    -webkit-transform: rotateY(0deg) rotateX(0deg);
            transform: rotateY(0deg) rotateX(0deg);
  }
  100% {
    opacity: 1;
    -webkit-transform: rotateY(360deg) rotateX(360deg);
            transform: rotateY(360deg) rotateX(360deg);
  }
}
body {
  background: #222;
  font-size: 100%;
}

.viewport {
  margin-top: calc(50vh - 100px);
  -webkit-perspective: 600px;
          perspective: 600px;
  -webkit-transform: scale(0.75, 0.75);
          transform: scale(0.75, 0.75);
}

.box {
  width: 200px;
  height: 200px;
  position: relative;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transition: -webkit-transform 1s ease-out;
  transition: -webkit-transform 1s ease-out;
  transition: transform 1s ease-out;
  transition: transform 1s ease-out, -webkit-transform 1s ease-out;
  /* essential for clean drag control */
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  margin: 0 auto 100px;
  -webkit-animation: startSpin 2s ease-out;
          animation: startSpin 2s ease-out;
}
.box .side {
  background-color: transparent;
  width: 200px;
  height: 200px;
  display: block;
  position: absolute;
  text-align: center;
  font-weight: bold;
  color: white;
}
.box .side.front {
  -webkit-transform: rotateZ(0deg) translateZ(100px);
          transform: rotateZ(0deg) translateZ(100px);
}
.box .side.back {
  -webkit-transform: rotateX(180deg) rotateZ(180deg) translateZ(100px);
          transform: rotateX(180deg) rotateZ(180deg) translateZ(100px);
}
.box .side.right {
  -webkit-transform: rotateY(90deg) rotateZ(90deg) translateZ(100px);
          transform: rotateY(90deg) rotateZ(90deg) translateZ(100px);
}
.box .side.left {
  -webkit-transform: rotateY(-90deg) rotateZ(-90deg) translateZ(100px);
          transform: rotateY(-90deg) rotateZ(-90deg) translateZ(100px);
}
.box .side.top {
  -webkit-transform: rotateX(90deg) rotateZ(-90deg) translateZ(100px);
          transform: rotateX(90deg) rotateZ(-90deg) translateZ(100px);
}
.box .side.bottom {
  -webkit-transform: rotateX(-90deg) rotateZ(-90deg) translateZ(100px);
          transform: rotateX(-90deg) rotateZ(-90deg) translateZ(100px);
}
.box .side div {
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  float: left;
  background: rgba(255, 228, 77, 0.6);
  box-shadow: 0px 0px 66.66667px 10px rgba(255, 226, 61, 0.3);
  display: inline-block;
  width: 33.33333px;
  height: 33.33333px;
  margin: 0;
  padding: 0;
  -webkit-animation: blockSlide 777ms infinite alternate;
          animation: blockSlide 777ms infinite alternate;
  -webkit-animation-timing-function: easeInOutSine;
          animation-timing-function: easeInOutSine;
  /* this loop is the unique things */
  /* currently all sides are identical */
}
.box .side div:nth-child(1) {
  -webkit-animation-duration: 809ms;
          animation-duration: 809ms;
  -webkit-transform: translateZ(3px);
          transform: translateZ(3px);
}
.box .side div:nth-child(2) {
  -webkit-animation-duration: 894ms;
          animation-duration: 894ms;
  -webkit-transform: translateZ(12px);
          transform: translateZ(12px);
}
.box .side div:nth-child(3) {
  -webkit-animation-duration: 244ms;
          animation-duration: 244ms;
  -webkit-transform: translateZ(21px);
          transform: translateZ(21px);
}
.box .side div:nth-child(4) {
  -webkit-animation-duration: 769ms;
          animation-duration: 769ms;
  -webkit-transform: translateZ(57px);
          transform: translateZ(57px);
}
.box .side div:nth-child(5) {
  -webkit-animation-duration: 125ms;
          animation-duration: 125ms;
  -webkit-transform: translateZ(1px);
          transform: translateZ(1px);
}
.box .side div:nth-child(6) {
  -webkit-animation-duration: 729ms;
          animation-duration: 729ms;
  -webkit-transform: translateZ(41px);
          transform: translateZ(41px);
}
.box .side div:nth-child(7) {
  -webkit-animation-duration: 1453ms;
          animation-duration: 1453ms;
  -webkit-transform: translateZ(6px);
          transform: translateZ(6px);
}
.box .side div:nth-child(8) {
  -webkit-animation-duration: 1127ms;
          animation-duration: 1127ms;
  -webkit-transform: translateZ(50px);
          transform: translateZ(50px);
}
.box .side div:nth-child(9) {
  -webkit-animation-duration: 1113ms;
          animation-duration: 1113ms;
  -webkit-transform: translateZ(51px);
          transform: translateZ(51px);
}
.box .side div:nth-child(10) {
  -webkit-animation-duration: 1425ms;
          animation-duration: 1425ms;
  -webkit-transform: translateZ(57px);
          transform: translateZ(57px);
}
.box .side div:nth-child(11) {
  -webkit-animation-duration: 1657ms;
          animation-duration: 1657ms;
  -webkit-transform: translateZ(19px);
          transform: translateZ(19px);
}
.box .side div:nth-child(12) {
  -webkit-animation-duration: 219ms;
          animation-duration: 219ms;
  -webkit-transform: translateZ(12px);
          transform: translateZ(12px);
}
.box .side div:nth-child(13) {
  -webkit-animation-duration: 669ms;
          animation-duration: 669ms;
  -webkit-transform: translateZ(16px);
          transform: translateZ(16px);
}
.box .side div:nth-child(14) {
  -webkit-animation-duration: 1596ms;
          animation-duration: 1596ms;
  -webkit-transform: translateZ(9px);
          transform: translateZ(9px);
}
.box .side div:nth-child(15) {
  -webkit-animation-duration: 854ms;
          animation-duration: 854ms;
  -webkit-transform: translateZ(4px);
          transform: translateZ(4px);
}
.box .side div:nth-child(16) {
  -webkit-animation-duration: 1115ms;
          animation-duration: 1115ms;
  -webkit-transform: translateZ(9px);
          transform: translateZ(9px);
}
.box .side div:nth-child(17) {
  -webkit-animation-duration: 1335ms;
          animation-duration: 1335ms;
  -webkit-transform: translateZ(34px);
          transform: translateZ(34px);
}
.box .side div:nth-child(18) {
  -webkit-animation-duration: 914ms;
          animation-duration: 914ms;
  -webkit-transform: translateZ(36px);
          transform: translateZ(36px);
}
.box .side div:nth-child(19) {
  -webkit-animation-duration: 744ms;
          animation-duration: 744ms;
  -webkit-transform: translateZ(14px);
          transform: translateZ(14px);
}
.box .side div:nth-child(20) {
  -webkit-animation-duration: 661ms;
          animation-duration: 661ms;
  -webkit-transform: translateZ(12px);
          transform: translateZ(12px);
}
.box .side div:nth-child(21) {
  -webkit-animation-duration: 1027ms;
          animation-duration: 1027ms;
  -webkit-transform: translateZ(46px);
          transform: translateZ(46px);
}
.box .side div:nth-child(22) {
  -webkit-animation-duration: 1532ms;
          animation-duration: 1532ms;
  -webkit-transform: translateZ(5px);
          transform: translateZ(5px);
}
.box .side div:nth-child(23) {
  -webkit-animation-duration: 891ms;
          animation-duration: 891ms;
  -webkit-transform: translateZ(31px);
          transform: translateZ(31px);
}
.box .side div:nth-child(24) {
  -webkit-animation-duration: 668ms;
          animation-duration: 668ms;
  -webkit-transform: translateZ(11px);
          transform: translateZ(11px);
}
.box .side div:nth-child(25) {
  -webkit-animation-duration: 512ms;
          animation-duration: 512ms;
  -webkit-transform: translateZ(11px);
          transform: translateZ(11px);
}
.box .side div:nth-child(26) {
  -webkit-animation-duration: 1325ms;
          animation-duration: 1325ms;
  -webkit-transform: translateZ(51px);
          transform: translateZ(51px);
}
.box .side div:nth-child(27) {
  -webkit-animation-duration: 504ms;
          animation-duration: 504ms;
  -webkit-transform: translateZ(53px);
          transform: translateZ(53px);
}
.box .side div:nth-child(28) {
  -webkit-animation-duration: 868ms;
          animation-duration: 868ms;
  -webkit-transform: translateZ(12px);
          transform: translateZ(12px);
}
.box .side div:nth-child(29) {
  -webkit-animation-duration: 1505ms;
          animation-duration: 1505ms;
  -webkit-transform: translateZ(55px);
          transform: translateZ(55px);
}
.box .side div:nth-child(30) {
  -webkit-animation-duration: 1155ms;
          animation-duration: 1155ms;
  -webkit-transform: translateZ(26px);
          transform: translateZ(26px);
}
.box .side div:nth-child(31) {
  -webkit-animation-duration: 1068ms;
          animation-duration: 1068ms;
  -webkit-transform: translateZ(56px);
          transform: translateZ(56px);
}
.box .side div:nth-child(32) {
  -webkit-animation-duration: 1268ms;
          animation-duration: 1268ms;
  -webkit-transform: translateZ(3px);
          transform: translateZ(3px);
}
.box .side div:nth-child(33) {
  -webkit-animation-duration: 661ms;
          animation-duration: 661ms;
  -webkit-transform: translateZ(3px);
          transform: translateZ(3px);
}
.box .side div:nth-child(34) {
  -webkit-animation-duration: 1380ms;
          animation-duration: 1380ms;
  -webkit-transform: translateZ(26px);
          transform: translateZ(26px);
}
.box .side div:nth-child(35) {
  -webkit-animation-duration: 1688ms;
          animation-duration: 1688ms;
  -webkit-transform: translateZ(6px);
          transform: translateZ(6px);
}
.box .side div:nth-child(36) {
  -webkit-animation-duration: 1114ms;
          animation-duration: 1114ms;
  -webkit-transform: translateZ(18px);
          transform: translateZ(18px);
}

JavaScript

//Javascript is strictly for camera (viewport) movement
//All the pretty animation occurs in CSS
$(function() {

var el = document.createElement('div'),
		transformProps = 'transform'.split(' '),
		transformProp = support(transformProps),
		transitionDuration = 'transitionDuration'.split(' '),
		transitionDurationProp = support(transitionDuration);

function support(props) {
		for (var i = 0, l = props.length; i < l; i++) {
			if (typeof el.style[props[i]] !== "undefined") {
				return props[i];
			}
		}
	}

var mouse = {
			start: {}
		},
		touch = document.ontouchmove !== undefined,
		viewport = {
			x: -10,
			y: 20,
			el: $('.box')[0],
			move: function(coords) {

if (coords) {
					if (typeof coords.x === "number") this.x = coords.x;
					if (typeof coords.y === "number") this.y = coords.y;
				}

this.el.style[transformProp] = "rotateX(" + this.x + "deg) rotateY(" + this.y + "deg)";
			},
			reset: function() {
				this.move({
					x: 0,
					y: 0
				});
			}
		};

viewport.duration = function() {
		var d = touch ? 50 : 500;
		viewport.el.style[transitionDurationProp] = d + "ms";
		return d;
	}();

$(document).keydown(function(evt) {
		switch (evt.keyCode) {
			case 37: // left
				viewport.move({
					y: viewport.y - 90
				});
				break;

case 38: // up
				evt.preventDefault();
				viewport.move({
					x: viewport.x + 90
				});
				break;

case 39: // right
				viewport.move({
					y: viewport.y + 90
				});
				break;

case 40: // down
				evt.preventDefault();
				viewport.move({
					x: viewport.x - 90
				});
				break;

case 27: //esc
				viewport.reset();
				break;

default:
				break;
		};
	}).bind('mousedown touchstart', function(evt) {
		delete mouse.last;
		if ($(evt.target).is('a, iframe')) {
			return true;
		}

evt.originalEvent.touches ? evt = evt.originalEvent.touches[0] : null;
		mouse.start.x = evt.pageX;
		mouse.start.y = evt.pageY;
		$(document).bind('mousemove touchmove', function(event) {
			// Only perform rotation if one touch or mouse (e.g. still scale with pinch and zoom)
			if (!touch || !(event.originalEvent && event.originalEvent.touches.length > 1)) {
				event.preventDefault();
				// Get touch co-ords
				event.originalEvent.touches ? event = event.originalEvent.touches[0] : null;
				$('.viewport').trigger('move-viewport', {
					x: event.pageX,
					y: event.pageY
				});
			}
		});

$(document).bind('mouseup touchend', function() {
			$(document).unbind('mousemove touchmove');
		});
	});

$('.viewport').bind('move-viewport', function(evt, movedMouse) {

// Reduce movement on touch screens
		var movementScaleFactor = touch ? 4 : 1;
		console.log(movementScaleFactor);

if (!mouse.last) {
			mouse.last = mouse.start;
		} else {
			if (forward(mouse.start.x, mouse.last.x) != forward(mouse.last.x, movedMouse.x)) {
				mouse.start.x = mouse.last.x;
			}
			if (forward(mouse.start.y, mouse.last.y) != forward(mouse.last.y, movedMouse.y)) {
				mouse.start.y = mouse.last.y;
			}
		}

viewport.move({
			x: viewport.x + parseInt((mouse.start.y - movedMouse.y) / movementScaleFactor),
			y: viewport.y - parseInt((mouse.start.x - movedMouse.x) / movementScaleFactor)
		});

mouse.last.x = movedMouse.x;
		mouse.last.y = movedMouse.y;

function forward(v1, v2) {
			return v1 >= v2 ? true : false;
		}
	});

});

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg