dom元素三维分层布局展示效果
代码语言:html
所属分类:动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
:root {
-webkit-perspective: 500vmin;
perspective: 500vmin;
--side-height: 1.5em;
--default-color: rgba(127, 127, 127, .2);
--hover-color: rgba(0, 0, 255, .2);
}
body {
min-height: 100vh;
font: normal 1em/1.4 helvetica, sans-serif;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.message {
font: 100 2em/1.5 helvetica, sans-serif;
}
.demo {
-webkit-transform-style: preserve-3d !important;
transform-style: preserve-3d !important;
-webkit-transform: rotateY(-40deg) rotateX(40deg) !important;
transform: rotateY(-40deg) rotateX(40deg) !important;
}
.demo * {
display: block;
padding: 1em;
margin: .5em;
position: relative;
background: var(--default-color);
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform: translateZ(0);
transform: translateZ(0);
transition: -webkit-transform .3s;
transition: transform .3s;
transition: transform .3s, -webkit-transform .3s;
}
.demo *::before, .demo *::after {
content: "";
display: block;
position: absolute;
background: transparent;
transition: all .3s;
}
.demo *::before {
width: 100%;
height: var(--side-height);
left: 0;
bottom: 0;
-webkit-transform-origin: center bottom;
transform-origin: center bottom;
-webkit-transform: scaleY(0) rotateX(90deg.........完整代码请登录后点击上方下载按钮下载查看
网友评论0