3D立方体旋转动画

最新推荐文章于 2024-11-01 19:32:25 发布

霉霉的第四只猫

最新推荐文章于 2024-11-01 19:32:25 发布

阅读量104

点赞数

分类专栏： HTML5 文章标签： css3

本文链接：https://blog.csdn.net/weixin_43769732/article/details/118346269

版权

HTML5 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.代码：


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>3D立方体旋转动画</title>
<style type="text/css">
@keyframes rotate{
	0%{transform:rotateX(0deg) rotateY(0deg);}
	100%{transform:rotateX(360deg) rotateY(360deg);}
	}
@-webkit-keyframes rotate{
	0%{transform:rotateX(0deg) rotateY(0deg);}
	100%{transform:rotateX(360deg) rotateY(360deg);}
	}
html{background:#02C3E2;height:100%;}
.main{margin:300px auto;perspective:1000px;width:200px;height:200px;}
.div1{margin:auto;width:200px;height:200px;position:relative;transform-style:preserve-3d;animation:rotate 5s infinite linear;}
.div1 > div{width:100%;height:100%;position:absolute;background-color:#333;opacity:.9;border:1px solid #fff;color:#fff;font-size:36px;font-family:"微软雅黑";font-weight:bold;text-align:center;line-height:200px;transition:transform .2s ease-in;-webkit-transition:transform .2s ease-in;}
.div1 > span{display:block;width:100px;height:100px;border:1px solid #000;background-color:#999;position:absolute;top:50px;left:50px;}
.div1 > span img{width:100px;height:100px;}
.div1 .out-front{transform:translateZ(100px);-moz-transform:translateZ(100px);-webkit-transform:translateZ(100px);}
.div1 .out-back{transform:translateZ(-100px) rotateY(180deg);-moz-transform:translateZ(-100px) rotateY(180deg);-webkit-transform:translateZ(-100px) rotateY(180deg)}
.div1 .out-left{transform:translateX(-100px) rotateY(-90deg);-moz-transform:translateX(-100px) rotateY(-90deg);-webkit-transform:translateX(-100px) rotateY(-90deg);}
.div1 .out-right{transform:translateX(100px) rotateY(90deg);-moz-transform:translateX(100px) rotateY(90deg);-webkit-transform:translateX(100px) rotateY(90deg);}
.div1 .out-top{transform:translateY(-100px) rotateX(90deg);-moz-transform:translateY(-100px) rotateX(90deg);-webkit-transform:translateY(-100px) rotateX(90deg);}
.div1 .out-bottom{transform:translateY(100px) rotateX(-90deg);-moz-transform:translateY(100px) rotateX(-90deg);-webkit-transform:translateY(100px) rotateX(-90deg);}

.div1 .in-front{transform:translateZ(50px);-moz-transform:translateZ(50px);-webkit-transform:translateZ(50px);}
.div1 .in-back{transform:translateZ(-50px) rotateY(180deg);-moz-transform:translateZ(-50px) rotateY(180deg);-webkit-transform:translateZ(-50px) rotateY(180deg)}
.div1 .in-left{transform:translateX(-50px) rotateY(-90deg);-moz-transform:translateX(-50px) rotateY(-90deg);-webkit-transform:translateX(-50px) rotateY(-90deg);}
.div1 .in-right{transform:translateX(50px) rotateY(90deg);-moz-transform:translateX(50px) rotateY(90deg);-webkit-transform:translateX(50px) rotateY(90deg);}
.div1 .in-top{transform:translateY(-50px) rotateX(90deg);-moz-transform:translateY(-50px) rotateX(90deg);-webkit-transform:translateY(-50px) rotateX(90deg);}
.div1 .in-bottom{transform:translateY(50px) rotateX(-90deg);-moz-transform:translateY(50px) rotateX(-90deg);-webkit-transform:translateY(50px) rotateX(-90deg);}

.main:hover .div1 .out-front{transform:translateZ(200px);-moz-transform:translateZ(200px);-webkit-transform:translateZ(200px);}
.main:hover .div1 .out-back{transform:translateZ(-200px) rotateY(180deg);-moz-transform:translateZ(-200px) rotateY(180deg);-webkit-transform:translateZ(-200px) rotateY(180deg)}
.main:hover .div1 .out-left{transform:translateX(-200px) rotateY(-90deg);-moz-transform:translateX(-200px) rotateY(-90deg);-webkit-transform:translateX(-200px) rotateY(-90deg);}
.main:hover .div1 .out-right{transform:translateX(200px) rotateY(90deg);-moz-transform:translateX(200px) rotateY(90deg);-webkit-transform:translateX(200px) rotateY(90deg);}
.main:hover .div1 .out-top{transform:translateY(-200px) rotateX(90deg);-moz-transform:translateY(-200px) rotateX(90deg);-webkit-transform:translateY(-200px) rotateX(90deg);}
.main:hover .div1 .out-bottom{transform:translateY(200px) rotateX(-90deg);-moz-transform:translateY(200px) rotateX(-90deg);-webkit-transform:translateY(200px) rotateX(-90deg);}

.UI{height: 200px; text-align: center;color: white;font-size: 80px; font-family:"楷体";}
</style>
</head>

<body>

<div class="main">

      <div class="div1">
            <div class="out-front"><img src="ps.jpg"></div>

            <div class="out-back"><img src="dw2.png"></div>

            <div class="out-left"><img src="Ai.png"></div>

            <div class="out-right"><img src="pr.jpg"></div>

            <div class="out-top"><img src="Ae.png"></div>

            <div class="out-bottom"><img src="c4da.png"></div>

            <span class="in-front"></span>
            <span class="in-back"></span>
            <span class="in-left"></span>
            <span class="in-right"></span>
            <span class="in-top"></span>
            <span class="in-bottom"></span>
      </div>
      
</div>
<div class="UI">design</div>
</body>
</html>