css实现三维3d立体卡片悬浮倾斜效果代码-html代码-BFW代码库

css实现三维3d立体卡片悬浮倾斜效果代码

代码语言：html

所属分类：悬停

代码描述：css实现三维3d立体卡片悬浮倾斜效果代码，卡片有厚度，鼠标悬浮倾斜效果。

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

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

<head>
    <meta charset="UTF-8">
    <style>
        @import url("https://fonts.googleapis.com/css?family=Raleway:400,400i,700");
        	* {
        	margin:0 auto;
        	padding:0;
        	box-sizing:border-box
        }
        body {
        	font-family:Raleway,sans-serif;
        	display:flex;
        	align-items:center;
        	min-height:100vh;
        	background-color:#ddd
        }
        .card-container {
        	perspective:50em
        }
        .card-container:nth-child(1) {
        	--bi:repeating-linear-gradient(30deg,#111 0 .25em,#333 0 1em)
        }
        .card-container:nth-child(2) {
        	--bi:linear-gradient(#555 5em,#0000 3em),linear-gradient(60deg,#880E4F,#1A237E)
        }
        .card {
        	position:relative;
        	width:320px;
        	padding:3em;
        	color:#fff;
        	transform:rotateY(30deg) rotateX(15deg);
        	transform-style:preserve-3d;
        	transition:transform 1s
        }
        .card:hover {
        	transform:rotateY(-30deg) rotateX(-15deg)
        }
        .layers {
        	position:absolute;
        	left:0;
        	top:0;
        	width:100%;
        	height:100%;
        	transform-style:preserve-3d;
        	z-index:-1
        }
        .layer {
        	position:absolute;
        	left:0;
        	top:0;
        	width:100%;
        	height:100%;
        	border-radius:1em;
        	background-image:var(--bi);
        	transform:translateZ(var(--tz));
        	box-shadow:0 0 .5em #000d inset
        }
        .layer:nth-child(1) {
        	--tz:0
        }
        .layer:nth-child(2) {
        	--tz:-4px
        }
        .layer:nth-child(3) {
        	--tz:-8px
        }
        .layer:nth-child(4) {
        	--tz:-12px
        }
        .layer:nth-child(5) {
        	--tz:-16px
        }
        .layer:nth-child(6) {
        	--tz:-20px
        }
        .layer:nth-child(7) {
        	--tz:-24px
        }
        .layer:nth-child(8) {
        	--tz:-28px
        }
        .layer:nth-child(9) {
        	--tz:-32px
        }
        .layer:nth-child(10) {
        	--tz:-36px
        }
        .layer:last-child {
        	box-shadow:0 0 .5em #000d inset,0 0 5px #000
        }
    </style>
</head.........完整代码请登录后点击上方下载按钮下载查看