css实现十四面立方体旋转动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：css实现十四面立方体旋转动画效果代码

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

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

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

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        *,:before,:after {
        	box-sizing:border-box;
        }
        body {
        	font-family:sans-serif;
        	margin:0;
        	min-height:100vh;
        	font-family:"ZCOOL KuaiLe",cursive;
        	background:radial-gradient(#444,#111);
        	overflow:hidden;
        }
        .app {
        	min-height:inherit;
        	display:flex;
        	justify-content:center;
        	align-items:center;
        	-webkit-transform-style:preserve-3d;
        	transform-style:preserve-3d;
        }
        .scene {
        	-webkit-transform:rotateX(-45deg) rotateY(-45deg) rotateZ(0deg);
        	transform:rotateX(-45deg) rotateY(-45deg) rotateZ(0deg);
        	-webkit-transform-style:preserve-3d;
        	transform-style:preserve-3d;
        	position:relative;
        	width:41vmin;
        	height:41vmin;
        }
        .box {
        	position:absolute;
        	top:0;
        	left:0;
        	width:inherit;
        	height:inherit;
        	-webkit-transform:rotateX(0) rotateY(0) rotateZ(45deg);
        	transform:rotateX(0) rotateY(0) rotateZ(45deg);
        	-webkit-transform-style:preserve-3d;
        	transform-style:preserve-3d;
        	-webkit-animation:rotate 20s linear infinite;
        	animation:rotate 20s linear infinite;
        }
        .text {
        	position:absolute;
        	top:0;
        	left:0;
        	width:41vmin;
        	height:41vmin;
        	color:deeppink;
        	font-size:12vmin;
        	display:flex;
        	justify-content:center;
        	align-items:center;
        }
        .text--6,.text--9 {
        	text-decoration:underline;
        }
        .text--2,.text--4,.text--6,.text--11,.text--13 {
        	-webkit-transform:scaleX(-1);
        	transform:scaleX(-1);
        }
        .text--7 {
        	-webkit-transform:rotateZ(-90deg);
        	transform:rotateZ(-90deg);
        }
        .text--8 {
        	-webkit-transform:rotateZ(90deg) translateY(0.5em);
        	transform:rotateZ(90deg) translateY(0.5em);
        }
        .text--9 {
        	-webkit-transform:rotate(-90deg);
        	transform:rotate(-90deg);
        }
        .text--12 {
        	-webkit-transform:rotate(-90deg);
        	transform:rotate(-90deg);
        }
        .text--14 {
        	-webkit-transform:rotate(0.5turn) scaleX(-1) translateY(0.5em);
        	transform:rotate(0.5turn) scaleX(-1) translateY(0.5em);
        }
        .text--triangle {
        	color:hotpink;
        }
        .plane {
        	position:absolute;
        	top:0;
        	left:0;
        	width:inherit;
        	height:inherit;
        	-webkit-transform-style:preserve-3d;
        	transform-style:preserve-3d;
        	background:rgba(255,105,180,0.8);
        	border:0px solid transparent;
        }
        .front >.triangle {
        	position:absolute;
        	top:0;
        	left:0;
        	background:deeppink;
        	-webkit-transform-origin:100% 0;
        	transform-origin:100% 0;
        	-webkit-transform:translateX(-100%) rotateY(-55deg);
        	transform:translateX(-100%) rotateY(-55deg);
        	width:35.507041555vmin;
        	height:41vmin;
        	-webkit-clip-path:polygon(0 50%,100% 100%,100% 0%);
        	clip-path:polygon(0 50%,100% 100%,100% 0%);
        }
        .pair--1 .triangle-2 {
        	position:absolute;
        	top:0;
        	left:0;
        	background:deeppink;
        	-webkit-transform-origin:0% 0;
        	transform-origin:0% 0;
        	-webkit-transform:translateX(41vmin) rotateY(55deg);
        	transform:translateX(41vmin) rotateY(55deg);
        	width:35.507041555vmin;
        	height:41vmin;
        	-webkit-clip-path:polygon(0% 0,100% 50%,0% 100%);
        	clip-path:polygon(0% 0,100% 50%,0% 100%);
        }
        .pair--2 .triangle-2 {
        	position:absolute;
        	top:0;
        	left:0;
        	background:deeppink;
        	-webkit-transform-origin:0% 100%;
        	transform-origin:0% 100%;
        	-webkit-transform:translateY(-100%) rotateX(55deg);
        	transform:translateY(-100%) rotateX(55deg);
        	width:41vmin;
        	height:35.507041555vmin;
        	-webkit-clip-path:polygon(0 100%,100% 100%,50% 0%);
        	clip-path:polygon(0 100%,100% 100%,50% 0%);
        }
        .back >.triangle {
        	position:absolute;
        	top:0;
        	left:0;
        	background:deeppink;
        	-webkit-transform-origin:0% 100%;
        	transform-origin:0% 100%;
        	-webkit-transform:translateY(-100%) rotateX(-55deg);
        	transform:translateY(-100%) rotateX(-55deg);
        	width:41vmin;
        	height:35.507041555vmin;
        	-webkit-clip-path:polygon(0 100%,100% 100%,50% 0%);
        	clip-path:polygon(0 100%,100% 100%,50% 0%);
        }
        .back >.triangle-2 {
        	position:absolute;
        	top:0;
        	left:0;
        	background:deeppink;
        	-webkit-transform-origin:0% 0%;
        	transform-origin:0% 0%;
        	-webkit-transform:translateY(41vmin) rotateX(55deg);
        	transform:translateY(41vmin) rotateX(55deg);
        	width:41vmin;
        	height:35.507041555vmin;
        	-webkit-clip-path:polygon(100% 0%,0% 0%,50% 100%);
        	clip-path:polygon(100% 0%,0% 0%,50% 100%);
        }
        .pair {
        	-webkit-backface-visibility:visible;
        	backface-visibility:visible;
        	-webkit-transf.........完整代码请登录后点击上方下载按钮下载查看