css实现三维飞机绕高楼大厦飞行动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：三维

代码描述：css实现三维飞机绕高楼大厦飞行动画效果代码

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

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

<head>
    <meta charset="UTF-8">
<style>
    body {
	display:-webkit-box;
	display:flex;
	-webkit-box-pack:center;
	justify-content:center;
	-webkit-box-align:center;
	align-items:center;
	height:100vh;
	width:100vw;
	-webkit-perspective:1200px;
	perspective:1200px;
	background:#c4e4e4;
	flex-wrap:wrap;
}
body * {
	-webkit-transform-style:preserve-3d;
	transform-style:preserve-3d;
}
body *:before,body *:after {
	-webkit-transform-style:preserve-3d;
	transform-style:preserve-3d;
}
body .cell {
	position:absolute;
	height:2.5vh;
	width:100vw;
	z-index:999;
	cursor:pointer;
}
body .cell:focus ~ #wrap .plane .body .wrap,body .cell:active ~ #wrap .plane .body .wrap {
	-webkit-transform:rotateZ(720deg);
	transform:rotateZ(720deg);
}
body .cell:nth-of-type(1) {
	top:0vh;
}
body .cell:nth-of-type(1):hover ~ #wrap {
	-webkit-transform:rotateX(69deg) translateY(245px) scale(0.75);
	transform:rotateX(69deg) translateY(245px) scale(0.75);
	-webkit-transition:0.2s linear;
	transition:0.2s linear;
}
body .cell:nth-of-type(2) {
	top:2.5vh;
}
body .cell:nth-of-type(2):hover ~ #wrap {
	-webkit-transform:rotateX(68deg) translateY(240px) scale(0.75);
	transform:rotateX(68deg) translateY(240px) scale(0.75);
	-webkit-transition:0.2s linear;
	transition:0.2s linear;
}
body .cell:nth-of-type(3) {
	top:5vh;
}
body .cell:nth-of-type(3):hover ~ #wrap {
	-webkit-transform:rotateX(67deg) translateY(235px) scale(0.75);
	transform:rotateX(67deg) translateY(235px) scale(0.75);
	-webkit-transition:0.2s linear;
	transition:0.2s linear;
}
body .cell:nth-of-type(4) {
	top:7.5vh;
}
body .cell:nth-of-type(4):hover ~ #wrap {
	-webkit-transform:rotateX(66deg) translateY(230px) scale(0.75);
	transform:rotateX(66deg) translateY(230px) scale(0.75);
	-webkit-transition:0.2s linear;
	transition:0.2s linear;
}
body .cell:nth-of-type(5) {
	top:10vh;
}
body .cell:nth-of-type(5):hover ~ #wrap {
	-webkit-transform:rotateX(65deg) translateY(225px) scale(0.75);
	transform:rotateX(65deg) translateY(225px) scale(0.75);
	-webkit-transition:0.2s linear;
	transition:0.2s linear;
}
body .cell:nth-of-type(6) {
	top:12.5vh;
}
body .cell:nth-of-type(6):hover ~ #wrap {
	-webkit-transform:rotateX(64deg) translateY(220px) scale(0.75);
	transform:rotateX(64deg) translateY(220px) scale(0.75);
	-webkit-transition:0.2s linear;
	transition:0.2s linear;
}
body .cell:nth-of-type(7) {
	top:15vh;
}
body .cell:nth-of-type(7):hover ~ #wrap {
	-webkit-transform:rotateX(63deg) translateY(215px) scale(0.75);
	transform:rotateX(63deg) translateY(215px) scale(0.75);
	-webkit-transition:0.2s linear;
	transition:0.2s linear;
}
body .cell:nth-of-type(8) {
	top:17.5vh;
}
body .cell:nth-of-type(8):hover ~ #wrap {
	-webkit-transform:rotateX(62deg) translateY(210px) scale(0.75);
	transform:rotateX(62deg) translateY(210px) scale(0.75);
	-webkit-transition:0.2s linear;
	transition:0.2s linear;
}
body .cell:nth-of-type(9) {
	top:20vh;
}
body .cell:nth-of-type(9):hover ~ #wrap {
	-webkit-transform:rotateX(61deg) translateY(205px) scale(0.75);
	transform:rotateX(61deg) translateY(205px) scale(0.75);
	-webkit-transition:0.2s linear;
	transition:0.2s linear;
}
body .cell:nth-of-type(10) {
	top:22.5vh;
}
body .cell:nth-of-type(10):hover ~ #wrap {
	-webkit-transform:rotateX(60deg) translateY(200px) scale(0.75);
	transform:rotateX(60deg) translateY(200px) scale(0.75);
	-webkit-transition:0.2s linear;
	transition:0.2s linear;
}
body .cell:nth-of-type(11) {
	top:25vh;
}
body .cell:nth-of-type(11):hover ~ #wrap {
	-webkit-transform:rotateX(59deg) translateY(195px) scale(0.75);
	transform:rotateX(59deg) translateY(195px) scale(0.75);
	-webkit-transition:0.2s linear;
	transition:0.2s linear;
}
body .cell:nth-of-type(12) {
	top:27.5vh;
}
body .cell:nth-of-type(12):hover ~ #wrap {
	-webkit-transform:rotateX(58deg) translateY(190px) scale(0.75);
	transform:rotateX(58deg) translateY(190px) scale(0.75);
	-webkit-transition:0.2s linear;
	transition:0.2s linear;
}
body .cell:nth-of-type(13) {
	top:30vh;
}
body .cell:nth-of-type(13):hover ~ #wrap {
	-webkit-transform:rotateX(57deg) translateY(185px) scale(0.75);
	transform:rotateX(57deg) translateY(185px) scale(0.75);
	-webkit-transition:0.2s linear;
	transition:0.2s linear;
}
body .cell:nth-of-type(14) {
	top:32.5vh;
}
body .cell:nth-of-type(14):hover ~ #wrap {
	-webkit-transform:rotateX(56deg) translateY(180px) scale(0.75);
	transform:rotateX(56deg) translateY(180px) scale(0.75);
	-webkit-transition:0.2s linear;
	transition:0.2s linear;
}
body .cell:nth-of-type(15) {
	top:35vh;
}
body .cell:nth-of-type(15):hover ~ #wrap {
	-webkit-transform:rotateX(55deg) translateY(175px) scale(0.75);
	transform:rotateX(55deg) translateY(175px) scale(0.75);
	-webkit-transition:0.2s linear;
	transition:0.2s linear;
}
body .cell:nth-of-type(16) {
	top:37.5vh;
}
body .cell:nth-of-type(16):hover ~ #wrap {
	-webkit-transform:rotateX(54deg) translateY(170px) scale(0.75);
	transform:rotateX(54deg) translateY(170px) scale(0.75);
	-webkit-transition:0.2s linear;
	transition:0.2s linear;
}
body .cell:nth-of-type(17) {
	top:40vh;
}
body .cell:nth-of-type(17):hover ~ #wrap {
	-webkit-transform:rotateX(53deg) translateY(165px) scale(0.75);
	transform:rotateX(53deg) translateY(165px) scale(0.75);
	-webkit-transition:0.2s linear;
	transition:0.2s linear;
}
body .cell:nth-of-type(18) {
	top:42.5vh;
}
body .cell:nth-of-type(18):hover ~ #wrap {
	-webkit-transform:rotateX(52deg) translateY(160px) scale(0.75);
	transform:rotateX(52deg) translateY(160px) scale(0.75);
	-webkit-transition:0.2s linear;
	transition:0.2s linear;
}
body .cell:nth-of-type(19) {
	top:45vh;
}
body .cell:nth-of-type(19):hover ~ #wrap {
	-webkit-transform:rotateX(51deg) translateY(155px) scale(0.75);
	transform:rotateX(51deg) translateY(155.........完整代码请登录后点击上方下载按钮下载查看