原生js实现三维卡片点击旋转立体效果代码-html代码-BFW代码库

原生js实现三维卡片点击旋转立体效果代码

代码语言：html

代码描述：原生js实现三维卡片点击旋转立体效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  
  
  
<style>
html,body {
  padding:0;
  margin:0;
	background:#fafafa;
	text-align:center;
}

body {
  padding-top:2em;
}

h1 {
  margin-bottom:3rem;
  font-family:sans-serif;
  color:#666;
}

button {
	padding:2rem 1rem;
	width:8rem;
	border:0;
	font-size:1rem;
	font-weight:bold;
	background:#3e87ec;
	color:#fff;
	border-radius:.25rem;

	-webkit-perspective:500px;
	-webkit-user-select:none;
	-webkit-backface-visibility:hidden;

	-moz-perspective:500px;
	-moz-user-select:none;
	-moz-backface-visibility:hidden;

	-ms-perspective:500px;
	-ms-user-select:none;
	-ms-backface-visibility:hidden;

	perspective:500px;
	user-select:none;
	backface-visibility:hidden;
}

button[data-initialized] {
	box-shadow:0 .125rem .75rem rgba(0,0,0,.375);

	-webkit-transition:box-shadow ease-out .125s, -webkit-transform ease-out .125s;
	-moz-transition:box-shadow ease-out .125s, -moz-transform ease-out .125s;
	-ms-transition:box-shadow ease-out .125s, -ms-transform ease-out .125s;
	transition:box-shadow ease-out .125s, transform ease-out .125s;
}

button.tilt-l {
	box-shadow:.125rem .125rem .75rem rgba(0,0,0,.375);
}

button.tilt-r {
	box-shadow:-.125rem .125rem .75rem rgba(0,0,0,.375);
}

button.tilt-t {
	box-shadow:0 .25rem .85rem rgba(0,0,0,.375);
}

button.tilt-b {
	box-shadow:0 0 .5rem rgba(0,0,0,.375);
}

button.tilt-lt {
	box-shadow:.125rem .125rem .85rem rgba(0,0,0,.375);
}

button.tilt-rt {
	box-shadow:-.125rem .125rem .85rem rgba(0,0,0,.375);
}

button.tilt-lb {
	box-shadow:.125rem 0 .5rem rgba(0,0,0,.375);
}

button.tilt-rb {
	box-shadow:-.125rem 0 .5rem rgba(0,0,0,.375);
}

button.press {
	box-shadow:0 .0625rem .375rem rgba(0,0,0,.375);
}
</style>


</head>

<body translate="no" >
  <h1>Metro 3D Tile</h1>
<button>tickle my edges</button>
 
  
      <script>
var TileButton = function (element) {

  this._element = element;

  this._isDown = false;

  this._center = {
    x: element.offsetWidth * .5,
    y: element.offsetHeight * .5 };


  this._margin = this._center.x * .5;

  this._element.setA.........完整代码请登录后点击上方下载按钮下载查看