css实现三维可交互立方体上线圈打洞动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：css实现三维可交互立方体上线圈打洞动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">

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

    <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Anton'>
<style>
    body {
	background:radial-gradient(ellipse at bottom,#1b2735 0%,#090a0f 100%);
	height:100vh;
	overflow:hidden;
	display:flex;
	font-family:'Anton',sans-serif;
	justify-content:center;
	align-items:center;
	-webkit-perspective:1000px;
	perspective:1000px;
}
.container {
	position:relative;
	display:grid;
	grid-template-rows:repeat(20,5vh);
	grid-template-columns:repeat(20,5vw);
	-webkit-transform-style:preserve-3d;
	transform-style:preserve-3d;
}
.monitor {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	pointer-events:none;
	-webkit-transform-style:preserve-3d;
	transform-style:preserve-3d;
}
.trigger:active ~ .monitor .vr_layer_item {
	width:30%;
	height:30%;
	border-radius:5px;
}
.trigger:nth-child(1):hover ~ .monitor .camera.o-y {
	-webkit-transform:rotateY(72deg);
	transform:rotateY(72deg);
}
.trigger:nth-child(1):hover ~ .monitor .camera.o-x {
	-webkit-transform:rotateX(-72deg);
	transform:rotateX(-72deg);
}
.trigger:nth-child(2):hover ~ .monitor .camera.o-y {
	-webkit-transform:rotateY(64deg);
	transform:rotateY(64deg);
}
.trigger:nth-child(2):hover ~ .monitor .camera.o-x {
	-webkit-transform:rotateX(-72deg);
	transform:rotateX(-72deg);
}
.trigger:nth-child(3):hover ~ .monitor .camera.o-y {
	-webkit-transform:rotateY(56deg);
	transform:rotateY(56deg);
}
.trigger:nth-child(3):hover ~ .monitor .camera.o-x {
	-webkit-transform:rotateX(-72deg);
	transform:rotateX(-72deg);
}
.trigger:nth-child(4):hover ~ .monitor .camera.o-y {
	-webkit-transform:rotateY(48deg);
	transform:rotateY(48deg);
}
.trigger:nth-child(4):hover ~ .monitor .camera.o-x {
	-webkit-transform:rotateX(-72deg);
	transform:rotateX(-72deg);
}
.trigger:nth-child(5):hover ~ .monitor .camera.o-y {
	-webkit-transform:rotateY(40deg);
	transform:rotateY(40deg);
}
.trigger:nth-child(5):hover ~ .monitor .camera.o-x {
	-webkit-transform:rotateX(-72deg);
	transform:rotateX(-72deg);
}
.trigger:nth-child(6):hover ~ .monitor .camera.o-y {
	-webkit-transform:rotateY(32deg);
	transform:rotateY(32deg);
}
.trigger:nth-child(6):hover ~ .monitor .camera.o-x {
	-webkit-transform:rotateX(-72deg);
	transform:rotateX(-72deg);
}
.trigger:nth-child(7):hover ~ .monitor .camera.o-y {
	-webkit-transform:rotateY(24deg);
	transform:rotateY(24deg);
}
.trigger:nth-child(7):hover ~ .monitor .camera.o-x {
	-webkit-transform:rotateX(-72deg);
	transform:rotateX(-72deg);
}
.trigger:nth-child(8):hover ~ .monitor .camera.o-y {
	-webkit-transform:rotateY(16deg);
	transform:rotateY(16deg);
}
.trigger:nth-child(8):hover ~ .monitor .camera.o-x {
	-webkit-transform:rotateX(-72deg);
	transform:rotateX(-72deg);
}
.trigger:nth-child(9):hover ~ .monitor .camera.o-y {
	-webkit-transform:rotateY(8deg);
	transform:rotateY(8deg);
}
.trigger:nth-child(9):hover ~ .monitor .camera.o-x {
	-webkit-transform:rotateX(-72deg);
	transform:rotateX(-72deg);
}
.trigger:nth-child(10):hover ~ .monitor .camera.o-y {
	-webkit-transform:rotateY(0deg);
	transform:rotateY(0deg);
}
.trigger:nth-child(10):hover ~ .monitor .camera.o-x {
	-webkit-transform:rotateX(-72deg);
	transform:rotateX(-72deg);
}
.trigger:nth-child(11):hover ~ .monitor .camera.o-y {
	-webkit-transform:rotateY(-8deg);
	transform:rotateY(-8deg);
}
.trigger:nth-child(11):hover ~ .monitor .camera.o-x {
	-webkit-transform:rotateX(-72deg);
	transform:rotateX(-72deg);
}
.trigger:nth-child(12):hover ~ .monitor .camera.o-y {
	-webkit-transform:rotateY(-16deg);
	transform:rotateY(-16deg);
}
.trigger:nth-child(12):hover ~ .monitor .camera.o-x {
	-webkit-transform:rotateX(-72deg);
	transform:rotateX(-72deg);
}
.trigger:nth-child(13):hover ~ .monitor .camera.o-y {
	-webkit-transform:rotateY(-24deg);
	transform:rotateY(-24deg);
}
.trigger:nth-child(13):hover ~ .monitor .camera.o-x {
	-webkit-transform:rotateX(-72deg);
	transform:rotateX(-72deg);
}
.trigger:nth-child(14):hover ~ .monitor .camera.o-y {
	-webkit-transform:rotateY(-32deg);
	transform:rotateY(-32deg);
}
.trigger:nth-child(14):hover ~ .monitor .camera.o-x {
	-webkit-transform:rotateX(-72deg);
	transform:rotateX(-72deg);
}
.trigger:nth-child(15):hover ~ .monitor .camera.o-y {
	-webkit-transform:rotateY(-40deg);
	transform:rotateY(-40deg);
}
.trigger:nth-child(15):hover ~ .monitor .camera.o-x {
	-webkit-transform:rotateX(-72deg);
	transform:rotateX(-72deg);
}
.trigger:nth-child(16):hover ~ .monitor .camera.o-y {
	-webkit-transform:rotateY(-48deg);
	transform:rotateY(-48deg);
}
.trigger:nth-child(16):hover ~ .monitor .camera.o-x {
	-webkit-transform:rotateX(-72deg);
	transform:rotateX(-72deg);
}
.trigger:nth-child(17):hover ~ .monitor .camera.o-y {
	-webkit-transform:rotateY(-56deg);
	transform:rotateY(-56deg);
}
.trigger:nth-child(17):hover ~ .monitor .camera.o-x {
	-webkit-transform:rotateX(-72deg);
	transform:rotateX(-72deg);
}
.trigger:nth-child(18):hover ~ .monitor .camera.o-y {
	-webkit-transform:rotateY(-64deg);
	transform:rotateY(-64deg);
}
.trigger:nth-child(18):hover ~ .monitor .camera.o-x {
	-webkit-transform:rotateX(-72deg);
	transform:rotateX(-72deg);
}
.trigger:nth-child(19):hover ~ .monitor .camera.o-y {
	-webkit-transform:rotateY(-72deg);
	transform:rotateY(-72deg);
}
.trigger:nth-child(19):hover ~ .monitor .camera.o-x {
	-webkit-transform:rotateX(-72deg);
	transform:rotateX(-72deg);
}
.trigger:nth-child(20):hover ~ .monitor .camera.o-y {
	-webkit-transform:rotateY(-80deg);
	transform:rotateY(-80deg);
}
.trigger:nth-child(20):hover ~ .monitor .camera.o-x {
	-webkit-transform:rotateX(-72deg);
	transform:rotateX(-72deg);
}
.trigger:nth-child(21):hover ~ .monitor .camera.o-y {
	-webkit-transform:rotateY(72deg);
	transform:rotateY(72deg);
}
.trigger:nth-child(21):hover ~ .monitor .camera.o-x {
	-webkit-transform:rotateX(-64deg);
	transform:rotateX(-64deg);
}
.trigger:nth-child(22):hover ~ .monitor .camera.o-y {
	-webkit-transform:rotateY(64deg);
	transform:rotateY(64deg);
}
.trigger:nth-child(22):hover ~ .monitor .camera.o-x {
	-webkit-transform:rotateX(-64deg);
	transform:rotateX(-64deg);
}
.trigger:nth-child(23):hover ~ .monitor .camera.o-y {
	-webkit-transform:rotateY(56deg);
	transform:rotateY(56deg);
}
.trigger:nth-child(23):hover ~ .monitor .camera.o-x {
	-webkit-transform:rotateX(-64deg);
	transform:rotateX(-64deg);
}
.trigger:nth-child(24):hover ~ .monitor .camera.o-y {
	-webkit-transform:rotateY(48deg);
	transform:rotateY(48deg);
}
.trigger:nth-child(24):hover ~ .monitor .camera.o-x {
	-webkit-transform:rotateX(-64deg);
	transform:rotateX(-64deg);
}
.trigger:nth-child(25):hover ~ .monitor .camera.o-y {
	-webkit-transform:rotateY(40deg);
	transform:rotateY(40deg);
}
.trigger:nth-child(25):hover ~ .monitor .camera.o-x {
	-webkit-transform:rotateX(-64deg);
	transform:rotateX(-64deg);
}
.trigger:nth-child(26):hover ~ .monitor .camera.o-y {
	-webkit-transform:rotateY(32deg);
	transform:rotateY(32deg);
}
.trigger:nth-child(26):hover ~ .monitor .camera.o-x {
	-webkit-transform:rotateX(-64deg);
	transform:rotateX(-64deg);
}
.trigger:nth-child(27):hover ~ .monitor .camera.o-y {
	-webkit-transform:rotateY(24deg);
	transform:rotateY(24deg);
}
.trigger:nth-child(27):hover ~ .monitor .camera.o-x {
	-webkit-transform:rotateX(-64deg);
	transform:rotateX(-64deg);
}
.trigger:nth-child(28):hover ~ .monitor .camera.o-y {
	-webkit-transform:rotateY(16deg);
	transform:rotateY(16deg);
}
.trigger:nth-child(28):hover ~ .monitor .camera.o-x {
	-webkit-transform:rotateX(-64deg);
	transform:rotateX(-64deg);
}
.trigger:nth-child(29):hover ~ .monitor .camera.o-y {
	-webkit-transform:rotateY(8deg);
	transform:rotateY(8deg);
}
.trigger:nth-child(29):hover ~ .monitor .camera.o-x {
	-webkit-transform:rotateX(-64deg);
	transform:rotateX(-64deg);
}
.trigger:nth-child(30):hover ~ .monitor .camera.o-y {
	-webkit-transform:rotateY(0deg);
	transform:rotateY(0deg);
}
.trigger:nth-child(30):hover ~ .monitor .camera.o-x {
	-webkit-transform:rotateX(-64deg);
	transform:rotateX(-64deg);
}
.trigger:nth-child(31):hover ~ .monitor .camera.o-y {
	-webkit-transform:rotateY(-8deg);
	transform:rotateY(-8deg);
}
.trigger:nth-child(31):hover ~ .monitor .camera.o-x {
	-webkit-transform:rotateX(-64deg);
	transform:rotateX(-64deg);
}
.trigger:nth-child(32):hover ~ .monitor .camera.o-y {
	-webkit-transform:rotateY(-16deg);
	transform:rotateY(-16deg);
}
.trigger:nth-child(32):hover ~ .monitor .camera.o-x {
	-webkit-transform:rotateX(-64deg);
	transform:rotateX(-64deg);
}
.trigger:nth-child(33):hover ~ .monitor .camera.o-y {
	-webkit-transform:rotateY(-24deg);
	transform:rotateY(-24deg);
}
.trigger:nth-child(33):hover ~ .monitor .camera.o-x {
	-webkit-transform:rotateX(-64deg);
	transform:rotateX(-64deg);
}
.trigger:nth-child(34):hover ~ .monitor .camera.o-y {
	-webkit-transform:rotateY(-32deg);
	transform:rotateY(-32deg);
}
.trigger:nth-child(34):hover ~ .monitor .camera.o-x {
	-webkit-transform:rotateX(-64deg);
	transform:rotateX(-64deg);
}
.trigger:nth-child(35):hover ~ .monitor .camera.o-y {
	-webkit-transform:rotateY(-40deg);
	transform:rotateY(-40deg);
}
.trigger:nth-child(35):hover ~ .monitor .camera.o-x {
	-webkit-transform:rotateX(-64deg);
	transform:rotateX(-64deg);
}
.trigger:nth-child(36):hover ~ .monitor .camera.o-y {
	-webkit-transform:rotateY(-48deg);
	transform:rotateY(-48deg);
}
.trigger:nth-child(36):hover ~ .monitor .camera.o-x {
	-webkit-transform:rotateX(-64deg);
	transform:rotateX(-64deg);
}
.trigger:nth-child(37):hover ~ .monitor .camera.o-y {
	-webkit-transform:rotateY(-56deg);
	transform:rotateY(-56deg);
}
.trigger:nth-child(37):hover ~ .monitor .camera.o-x {
	-webkit-transform:rotateX(-64deg);
	transform:rotateX(-64deg);
}
.trigger:nth-child(38):hover ~ .monitor .camera.o-y {
	-webkit-transform:rotateY(-64deg);
	transform:rotateY(-64deg);
}
.trigger:nth-child(38):hover ~ .monitor .camera.o-x {
	-webkit-transform:rotateX(-64deg);
	transform:rotateX(-64deg);
}
.trigger:nth-child(39):hover ~ .monitor .camera.o-y {
	-webkit-transform:rotateY(-72deg);
	transform:rotateY(-72deg);
}
.trigger:nth-child(39):hover ~ .monitor .camera.o-x {
	-webkit-transform:rotateX(-64deg);
	transform:rotateX(-64deg);
}
.trigger:nth-child(40):hover ~ .monitor .camera.o-y {
	-webkit-transform:rotateY(-80deg);
	transform:rotateY(-80deg);
}
.trigger:nth-child(40):hover ~ .monitor .camera.o-x {
	-webkit-transform:rotateX(-64deg);
	transform:rotateX(-64deg);
}
.trigger:nth-child(41):hover ~ .monitor .camera.o-y {
	-webkit-transform:rotateY(72deg);
	transform:rotateY(72deg);
}
.trigger:nth-child(41):hover ~ .monitor .camera.o-x {
	-webkit-transform:rotateX(-56deg);
	transform:rotateX(-56deg);
}
.trigger:nth-child(42):hover ~ .monitor .camera.o-y {
	-webkit-transform:rotateY(64deg);
	transform:rotateY(64deg);
}
.trigger:nth-child(42):hover ~ .monitor .camera.o-x {
	-webkit-transform:rotateX(-56deg);
	transform:rotateX(-56deg);
}
.trigger:nth-child(43):hover ~ .monitor .camera.o-y {
	-webkit-transform:rotateY(56deg);
	transform:rotateY(56deg);
}
.trigger:nth-child(43):hover ~ .monitor .camera.o-x {
	-webkit-transform:rotateX(-56deg);
	transform:rotateX(-56deg);
}
.trigger:nth-child(44):hover ~ .monitor .camera.o-y {
	-webkit-transform:rotateY(48deg);
	transform:rotateY(48deg);
}
.trigger:nth-child(44):hover ~ .monitor .camera.o-x {
	-webkit-transform:rotateX(-56deg);
	transform:rotateX(-56deg);
}
.trigger:nth-child(45):hover ~ .monitor .camera.o-y {
	-webkit-transform:rotateY(40deg);
	transform:rotateY(40deg);
}
.trigger:nth-child(45):hover ~ .monitor .camera.o-x {
	-webkit-transform:rotateX(-56deg);
	transform:rotateX(-56deg);
}
.trigger:nth-child(46):hover ~ .monitor .camera.o-y {
	-webkit-transform:rotateY(32deg);
	transform:rotateY(32deg);
}
.trigger:nth-child(46):hover ~ .monitor .camera.o-x {
	-webkit-transform:rotateX(-56deg);
	transform:rotateX(-56deg);
}
.trigger:nth-child(47):hover ~ .monitor .camera.o-y {
	-webkit-transform:rotateY(24deg);
	transform:rotateY(24deg);
}
.trigger:nth-child(47):hover ~ .monitor .camera.o-x {
	-webkit-transform:rotateX(-56deg);
	transform:rotateX(-56deg);
}
.trigger:nth-child(48):hover ~ .monitor .camera.o-y {
	-webkit-transform:rotateY(16deg);
	transform:rotateY(16deg);
}
.trigger:nth-child(48):hover ~ .monitor .camera.o-x {
	-webkit-transform:rotateX(-56deg);
	transform:rotateX(-56deg);
}
.trigger:nth-child(49):hover ~ .monitor .camera.o-y {
	-webkit-transform:rotateY(8deg);
	transform:rotateY(8deg);
}
.trigger:nth-child(49):hover ~ .monitor .camera.o-x {
	-webkit-transform:rotateX(-56deg);
	transform:rotateX(-56deg);
}
.trigger:nth-child(50):hover ~ .monitor .camera.o-y {
	-webkit-transform:rotateY(0deg);
	transform:rotateY(0deg);
}
.trigger:nth-child(50):hover ~ .monitor .camera.o-x {
	-webkit-transform:rotateX(-56deg);
	transform:rotateX(-56deg);
}
.trigger:nth-child(51):hover ~ .monitor .camera.o-y {
	-webkit-transform:rotateY(-8deg);
	transform:rotateY(-8deg);
}
.trigger:nth-child(51):hover ~ .monitor .camera.o-x {
	-webkit-transform:rotateX(-56deg);
	transform:rotateX(-56deg);
}
.trigger:nth-child(52):hover ~ .monitor .camera.o-y {
	-webkit-transform:rotateY(-16deg);
	transform:rotateY(-16deg);
}
.trigger:nth-child(52):hover ~ .monitor .camera.o-x {
	-webkit-transform:rotateX(-56deg);
	transform:rotateX(-56deg);
}
.trigger:nth-child(53):hover ~ .monitor .camera.o-y {
	-webkit-transform:rotateY(-24deg);
	transform:rotateY(-24deg);
}
.trigger:nth-child(53):hover ~ .monitor .camera.o-x {
	-webkit-transform:rotateX(-56deg);
	transform:rotateX(-56deg);
}
.trigger:nth-child(54):hover ~ .monitor .camera.o-y {
	-webkit-transform:rotateY(-32deg);
	transform:rotateY(-32deg);
}
.trigger:nth-child(54):hover ~ .monitor .camera.o-x {
	-webkit-transform:rotateX(-56deg);
	transform:rotateX(-56deg);
}
.trigger:nth-child(55):hover ~ .monitor .camera.o-y {
	-webkit-transform:rotateY(-40deg);
	transform:rotateY(-40deg);
}
.trigger:nth-child(55):.........完整代码请登录后点击上方下载按钮下载查看