CSS 3D变换

下载代码

html

css

分享到微信朋友圈

html

css

@import url(https://fonts.googleapis.com/css?family=Quicksand);
html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.tile {
  position: absolute;
  display: none;
  -moz-perspective: 300px;
  -webkit-perspective: 300px;
  perspective: 300px;
  -moz-transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.tile.from-top {
  display: block;
  -moz-perspective-origin: 50% 0;
  -webkit-perspective-origin: 50% 0;
  perspective-origin: 50% 0;
}
.tile.from-top .inlay {
  -moz-transform-origin: 50% 0 0;
  -webkit-transform-origin: 50% 0 0;
  transform-origin: 50% 0 0;
  -moz-transform: rotateX(-90deg);
  -ms-transform: rotateX(-90deg);
  -webkit-transform: rotateX(-90deg);
  transform: rotateX(-90deg);
}
.tile.from-bottom {
  display: block;
  -moz-perspective-origin: 50% 100%;
  -webkit-perspective-origin: 50% 100%;
  perspective-origin: 50% 100%;
}
.tile.from-bottom .inlay {
  -moz-transform-origin: 50% 100% 0;
  -webkit-transform-origin: 50% 100% 0;
  transform-origin: 50% 100% 0;
  -moz-transform: rotateX(90deg);
  -ms-transform: rotateX(90deg);
  -webkit-transform: rotateX(90deg);
  transform: rotateX(90deg);
}
.tile.from-left {
  display: block;
  -moz-perspective-origin: 0 50%;
  -webkit-perspective-origin: 0 50%;
  perspective-origin: 0 50%;
}
.tile.from-left .inlay {
  -moz-transform-origin: 0 50% 0;
  -webkit-transform-origin: 0 50% 0;
  transform-origin: 0 50% 0;
  -moz-transform: rotateY(90deg);
  -ms-transform: rotateY(90deg);
  -webkit-transform: rotateY(90deg);
  transform: rotateY(90deg);
}
.tile.from-right {
  display: block;
  -moz-perspective-origin: 100% 50%;
  -webkit-perspective-origin: 100% 50%;
  perspective-origin: 100% 50%;
}
.tile.from-right .inlay {
  -moz-transform-origin: 100% 50% 0;
  -webkit-transform-origin: 100% 50% 0;
  transform-origin: 100% 50% 0;
  -moz-transform: rotateY(-90deg);
  -ms-transform: rotateY(-90deg);
  -webkit-transform: rotateY(-90deg);
  transform: rotateY(-90deg);
}

.inlay {
  width: 100%;
  height: 100%;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.cover {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  -moz-transition: background-color 0.3s ease-in-out;
  -o-transition: background-color 0.3s ease-in-out;
  -webkit-transition: background-color 0.3s ease-in-out;
  transition: background-color 0.3s ease-in-out;
}

.tile .inlay.show {
  -moz-transform: rotateX(0) rotateY(0);
  -ms-transform: rotateX(0) rotateY(0);
  -webkit-transform: rotateX(0) rotateY(0);
  transform: rotateX(0) rotateY(0);
}
.tile .inlay.show .cover {
  background-color: transparent;
}

#tag.before {
  width: 0;
  left: 0;
  padding: 15px 0 0 0;
}
#tag.before h1, #tag.before p, #tag.before ul, #tag.before span {
  opacity: 0;
  -moz-transform: translate3d(-50px, 0, 0);
  -ms-transform: translate3d(-50px, 0, 0);
  -webkit-transform: translate3d(-50px, 0, 0);
  transform: translate3d(-50px, 0, 0);
}

#tag.in {
  width: 220px;
}

#tag {
  -moz-transition: all 0.3s cubic-bezier(0.8, 0, 0.2, 1);
  -o-transition: all 0.3s cubic-bezier(0.8, 0, 0.2, 1);
  -webkit-transition: all 0.3s cubic-bezier(0.8, 0, 0.2, 1);
  transition: all 0.3s cubic-bezier(0.8, 0, 0.2, 1);
  position: fixed;
  width: 180px;
  height: 100px;
  top: 20px;
  left: 20px;
  font-family: "Quicksand", sans-serif;
  padding: 15px 0 0 20px;
  background-color: #000;
  color: #fff;
}
#tag h1, #tag p, #tag ul, #tag span {
  opacity: 1;
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}
#tag h1 {
  -moz-transition: all 0.3s ease-in-out 0.3s;
  -o-transition: all 0.3s ease-in-out 0.3s;
  -webkit-transition: all 0.3s ease-in-out;
  -webkit-transition-delay: 0.3s;
  transition: all 0.3s ease-in-out 0.3s;
  font-size: 30px;
  font-weight: 400;
  margin: 0;
}
#tag p {
  -moz-transition: all 0.3s ease-in-out 0.4s;
  -o-transition: all 0.3s ease-in-out 0.4s;
  -webkit-transition: all 0.3s ease-in-out;
  -webkit-transition-delay: 0.4s;
  transition: all 0.3s ease-in-out 0.4s;
}
#tag ul {
  -moz-transition: all 0.3s ease-in-out 0.6s;
  -o-transition: all 0.3s ease-in-out 0.6s;
  -webkit-transition: all 0.3s ease-in-out;
  -webkit-transition-delay: 0.6s;
  transition: all 0.3s ease-in-out 0.6s;
}
#tag p, #tag ul a {
  font-size: 12px;
  font-weight: 700;
}
#tag a {
  color: #fff;
  text-decoration: none;
}
#tag a:hover {
  background-color: #333;
}
#tag span {
  -moz-transition: all 0.3s ease-in-out 0.7s;
  -o-transition: all 0.3s ease-in-out 0.7s;
  -webkit-transition: all 0.3s ease-in-out;
  -webkit-transition-delay: 0.7s;
  transition: all 0.3s ease-in-out 0.7s;
  display: inline-block;
  margin-top: 40px;
  font-size: 10px;
}
#tag ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

JavaScript

var container = document.getElementById( "container" );
var tag = document.getElementById( "tag" );

var orientation = {
	TOP: 0,
	RIGHT: 1,
	BOTTOM: 2,
	LEFT: 3
}

var options = {
	tileSize: 80,
	color: "#4fb0ca",
	randomColor: true
}

var color = function() {

var values = [ "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f" ];
	var color = "#", i = 7;

while ( --i ) color += values[ ~~( Math.random() * 16 ) ];

return color;
}

var random = function( min, max ) {
	return min + Math.random() * ( max - min );
}

var Tile = function( x, y, color, onComplete ) {

var div, inlay, cover;
	var neighbors = [];
	var isShown = false;

function initUI() {

div = document.createElement( "div" );
		div.className = "tile";
		div.style.width = options.tileSize + "px";
		div.style.height = options.tileSize + "px";
		div.style.top = y * options.tileSize + "px";
		div.style.left = x * options.tileSize + "px";

inlay = document.createElement( "div" );
		inlay.className = "inlay";
		inlay.style.backgroundColor = color;

cover = document.createElement( "div" );
		cover.className = "cover";

div.appendChild( inlay );
		inlay.appendChild( cover );

}

// ------
	// PUBLIC
	// ------

this.isShown = function() {
		return isShown;
	}

this.getElement = function() {
		return div;
	}

this.addNeighbor = function( direction, neighbor ) {
		neighbors[ direction ] = neighbor;
	}

this.fromTop = function() {
		div.classList.add( "from-top" );
		show();
	}

this.fromBottom = function() {
		div.classList.add( "from-bottom" );
		show();
	}

this.fromRight = function() {
		div.classList.add( "from-right" );
		show();
	}

this.fromLeft = function() {
		div.classList.add( "from-left" );
		show();
	}

function onTransitionEnd() {

for ( var i = 0; i < neighbors.length; i++ ) {

if ( neighbors[ i ] && ! neighbors[ i ].isShown() ) {

neighbors[ i ][ getFunctionName( i ) ]();

setTimeout( onTransitionEnd, random( 10, 200 ) );
				break;

}

// -------
	// PRIVATE
	// -------

function getFunctionName( index ) {
		return [ "fromBottom", "fromLeft", "fromTop", "fromRight" ][ index ];
	}

function show() {
		isShown = true;

setTimeout( function() {

inlay.classList.add( "show" );

setTimeout( onTransitionEnd, random( 200, 300 ) );
			setTimeout( onComplete, 300 );

}, 50 );
	}

initUI();

}

var Controller = function( container, size, position ) {

var width = Math.ceil( size.width / options.tileSize );
	var height = Math.ceil( size.height / options.tileSize );
	var tiles = [];
	var onComplete = null;
	var completeCount = 0;
	var tileColor = options.randomColor ? color() : options.color;

function init() {
		fillScreen();
		snowball();
	}

// ------
	// PUBLIC
	// ------

this.onComplete = function( closure ) {
		onComplete = closure
	}

this.getColor = function() {
		return tileColor;
	}

// -------
	// PRIVATE
	// -------

function fillScreen() {

var tile;
		var length = width * height;

for ( var y = 0; y < height; y++ ) {
			for ( var x = 0; x < width; x++ ) {

tile = new Tile( x, y, tileColor, tileComplete );

container.appendChild( tile.getElement() );

tiles.push( tile );

}
		}

for ( var i = 0; i < length; i++ ) {

tile = tiles[ i ];
			row = ~~( i / width );
			col = i % width;

if ( col < width - 1 )
				tile.addNeighbor( orientation.RIGHT, tiles[ i + 1 ] );

if ( col > 0 )
				tile.addNeighbor( orientation.LEFT, tiles[ i - 1 ] );

if ( row > 0 )
				tile.addNeighbor( orientation.TOP, tiles[ i - width ] );

if ( row < height - 1 )
				tile.addNeighbor( orientation.BOTTOM, tiles[ i + width ] );
		}
	}

function snowball() {
    
		var row = ~~( position.y / options.tileSize );
		var col = ~~( position.x / options.tileSize );
    
		tiles[ col + row * width ].fromTop();
	}

function tileComplete() {
		completeCount++;

if ( completeCount === tiles.length && onComplete ) {
			onComplete();
		}
	}

init();

}

function initListeners() {

document.addEventListener( "click", onClick, false );
	document.addEventListener( "touchstart", onTouchEnd, false );

}

function onClick( event ) {

var div = document.createElement( "div" );

var size = {
		width: window.innerWidth,
		height: window.innerHeight
	}

var position = {
		x: event.pageX,
		y: event.pageY
	}

var controller = new Controller( div, size, position );

controller.onComplete( function() {

document.body.style.backgroundColor = controller.getColor();
		container.removeChild( div );

} );

container.appendChild( div );

}

function onTouchEnd( event ) {

var touch = event.touches[ 0 ];

event.pageX = touch.pageX;
	event.pageY = touch.pageY;

onClick( event );
}

function setTag() {
  tag.className = "before in";
  
  setTimeout( function() {
    tag.className = "";
  }, 300 );
}

function start() {
  var event = {
    pageX: window.innerWidth / 2,
    pageY: window.innerHeight / 2
  } 
  
  onClick( event );
}

initListeners();
setTag();

setTimeout( start, 1000 );

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