div+css实现三维花岗岩双四面体点击旋转效果代码-html代码-BFW代码库

div+css实现三维花岗岩双四面体点击旋转效果代码

代码语言：html

所属分类：三维

代码描述：div+css实现三维花岗岩双四面体点击旋转效果代码

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

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

<head>
  <meta charset="UTF-8">
  

<style>
body {
	--pos: 65%;
	margin: 0;
	padding: 0;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	perspective: 100vmin;
	background: radial-gradient(circle at 50% -25%, #000000, #0e4964);
}


body * {
	transform-style: preserve-3d;
}

.content {
	width: 35vmin;
	height: 30.5vmin;
    transition: all 1s ease 0s;
	transform: translate(0px, -5vmin); 
	animation: floating 6s ease-in-out 0s infinite;
	cursor: pointer;
}

.content:before {
    content: "";
    position: absolute;
    width: 33%;
    height: 33%;
    left: 33%;
    top: 33%;
    transform: rotateX(60deg) translateZ(-40vmin);
    border-radius: 100%;
    box-shadow: 0 0 5vmin 0 #0000006b, 0 0 10vmin 0 #0000006b inset;
    filter: blur(10px);
    opacity: 0.25;
}

.content:hover, .content:hover * { animation-play-state:paused; }
.content:active .spin { animation: crazy 3s linear 0s infinite; }



@keyframes crazy {
	100% { transform: rotateY(360deg) rotateX(360deg); }
}

@keyframes floating {
	50% { transform: translate(0px, 10vmin); }
}


	
.pyramid {
    position: absolute;
    width: 100%;
    height: 100%;
    transform: rotateX(0deg);
}

.pyramid span {
	background: #343434;
	position: absolute;
	width: 100%;
	height: 100%;
	clip-path: polygon(0% 0%, 50% 100%, 100% 0%);
    --clr: #0000003b;
	--shadow: 
		repeating-conic-gradient(#0003 0.000001%, #fff0 .00005%, #fff0 .00035%, #fff0 .00005%),  
		repeating-conic-gradient(#fff2 0.00002%, #fff0 .00008%, #fff0 .0008%, #fff0 .00008%), 
		radial-gradien.........完整代码请登录后点击上方下载按钮下载查看