CSS3旋转3D正方形

最新推荐文章于 2022-12-31 20:18:24 发布

置顶夏日绝句

最新推荐文章于 2022-12-31 20:18:24 发布

阅读量1.6k

点赞数

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

本文链接：https://blog.csdn.net/Jerryjyuan/article/details/42273259

版权

HTML5 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

最近学CSS3，利用它的3D特性做了个3D自动旋转的正方形，刚学，代码有点乱，注释就没写了。只做了webkit版的，FF,IE等就没做了。希望大家路过代码有什么不足提出来，我刚学不久，难免很多代码写的不好。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS3选择3D正方形</title>
</head>
<style>
html,body,div,span,ul,li,ol,p,a{margin:0;padding:0;}
ul,li,ol{list-style:none;}
a{text-decoration:none;}
#container{margin:0 auto;width:500px; height:500px;border:1px #000 solid; background:#99F;position:relative;}
.cube{width:200px;height:200px;position:absolute; -webkit-perspective:10000; -webkit-transform-style:preserve-3d; top:150px;left:150px;-webkit-transform:rotateX(10deg) rotateY(10deg) rotateZ(10deg);-webkit-animation:cube 30s linear 0s infinite alternate;}
.cube li{width:200px;height:200px;color:#fff;font-size:36px;line-height:200px;text-align:center;font-weight:700;position:absolute;-webkit-transform-style:preserve-3d;}
.cube li:nth-child(1){background:#09F;-webkit-transform-origin: top; -webkit-transform:rotateX(90deg);}
.cube li:nth-child(2){background:#990;-webkit-transform-origin: right; -webkit-transform:rotateY(90deg);}
.cube li:nth-child(3){background:#3CC;-webkit-transform-origin: bottom; -webkit-transform:rotateX(-90deg);}
.cube li:nth-child(4){background:#C6F;-webkit-transform-origin: left;-webkit-transform:rotateY(-90deg);}
.cube li:nth-child(5){background:#CC3;-webkit-transform-origin:center; -webkit-transform:translateZ(200px)}
.cube li:nth-child(6){background:#F60;-webkit-transform-origin:center;}

@-webkit-keyframes cube{
0%{-webkit-transform:rotateY(10deg) rotateX(10deg) rotateZ(10deg);}
10%{-webkit-transform:rotateY(180deg)rotateX(10deg) rotateZ(10deg);}
25%{-webkit-transform:rotateY(360deg)rotateX(10deg) rotateZ(10deg);}
26%{-webkit-transform:rotateX(10deg) rotateY(10deg) rotateZ(10deg);}
40%{-webkit-transform:rotateX(180deg) rotateY(0deg) rotateZ(0deg);}
50%{-webkit-transform:rotateX(360deg) rotateY(0deg) rotateZ(0deg);}
51%{-webkit-transform:rotateZ(10deg) rotateY(10deg) rotateX(10deg);}
60%{-webkit-transform:rotateZ(180deg) rotateY(10deg) rotateX(10deg);}
75%{-webkit-transform:rotateZ(360deg) rotateY(10deg) rotateX(10deg);}
76%{-webkit-transform:rotateX(360deg) rotateY(360deg) rotateZ(360deg);}
100%{-webkit-transform:rotateX(10deg) rotateY(10deg) rotateZ(10deg);}
}
</style>
<body>
<div id="container">
	<ul class="cube">
    	<li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
</div>
</body>
</html>

夏日绝句

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS3旋转3D正方形

最近学CSS3，利用它的3D特性做了个3D自动旋转的正方形，刚学，代码有点乱，注释就没写了。只做了webkit版的，FF,IE等就没做了。希望大家路过代码有什么不足提出来，我刚学不久，难免很多代码写的不好。
复制链接

扫一扫