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

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

代码语言：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;
     .........完整代码请登录后点击上方下载按钮下载查看