原生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;

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

网友评论0