css实现立体火柴盒子悬浮抽出火柴动画效果代码-html代码-BFW代码库

css实现立体火柴盒子悬浮抽出火柴动画效果代码

代码语言：html

所属分类：悬停

代码描述：css实现立体火柴盒子悬浮抽出火柴动画效果代码

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

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

<head>
    <meta charset="UTF-8">
    <style>
        @import url("https://fonts.googleapis.com/css?family=BenchNine:700&display=swap");
    
    :root {
    	--color-outline: #302322;
    	--color-background: #fdf7ea;
    	--color-match: #b34a37;
    	--size-border: 8px;
    	--size-height: 300px;
    	--size-width: 200px;
    	--size-depth: 100px;
    }
    
    * {
    	box-sizing: border-box;
    	margin: 0;
    	padding: 0;
    	transition: all 0.3s ease;
    }
    
    *:before,
    *:after {
    	content: "";
    	position: absolute;
    }
    
    body {
    	display: flex;
    	justify-content: center;
    	align-items: center;
    	height: 100vh;
    	width: 100%;
    	background: var(--color-background);
    	font-family: "BenchNine", sans-serif;
    }
    
    .container {
    	width: 500px;
    	height: 500px;
    	position: relative;
    	perspective: 1200px;
    	padding-left: 80px;
    	padding-top: 180px;
    }
    
    .box {
    	width: var(--size-height);
    	height: var(--size-width);
    	position: absolute;
    	transform-style: preserve-3d;
    	transition: transform 0.5s;
    	transform: rotate(-50deg) rotateX(30deg) translateZ(10px);
    	cursor: pointer;
    	transform-origin: center center;
    }
    
    .box > div {
    	position: absolute;
    	text-align: center;
    }
    
    .box .front,
    .box .back {
    	width: var(--size-height);
    	height: var(--size-width);
    }
    
    .box .right,
    .box .left {
    	width: var(--size-depth);
    	height: var(--size-width);
    }
    
    .box .top,
    .box .bottom {
    	width: var(--size-height);
    	height: var(--size-depth);
    }
    
    .box .right,
    .box .left {
    	left: var(--size-depth);
    }
    
    .box .top,
    .box .bottom {
    	top: calc(var(--size-depth) / 2);
    }
    
    .box .front,
    .box .back {
    	background: var(--color-background);
    	border: var(--size-border) solid var(--color-outline);
    	border-bottom-width: calc(var(--size-border) / 2);
    }
    
    .box .right,
    .box .left,
    .box .top,
    .box .bottom {
    	background: var(--color-backgroun.........完整代码请登录后点击上方下载按钮下载查看