Html
    Css
    Js

    
                        
* {
	box-sizing:border-box;
	margin:0;
	padding:0;
}
html,body {
	height:100%;
}
body {
	display:grid;
	place-items:center;
	background-color:black;
	overflow:hidden;
}
.container {
	perspective:1000px;
}
.inner {
	--x-deg:-45deg;
	--y-deg:3deg;
	transform-style:preserve-3d;
	position:relative;
	display:grid;
	place-items:center;
	transform:rotateX(var(--x-deg)) rotateY(var(--y-deg));
}
.element {
	width:200px;
	height:150px;
	background-color:hsl(40,80%,50%);
	position:absolute;
	box-shadow:inset 0 0 50px hsl(0,0%,0%);
	transform-origin:center;
	transition:350ms ease;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.11.3
 立即下载

3D彩色纸片

更新时间:2022-06-27 01:59:30

0