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.........完整代码请登录后点击上方下载按钮下载查看