HTML5 利用CSS3 中的3D 模块绘制一个旋转3D正方体

最新推荐文章于 2021-08-15 15:12:35 发布

wotu__

最新推荐文章于 2021-08-15 15:12:35 发布

阅读量4.7k

点赞数 4

分类专栏： HTML5 文章标签： HTML CSS3 3D

本文链接：https://blog.csdn.net/hudaJY/article/details/80583669

版权

感觉还是比较简单的，直接上图:

要做出的效果就是这个立体的正方体，然后再让它自己不停地转动

代码展示:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>旋转正方体</title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			ul{
				width: 200px;
				height: 200px;
				position: relative;
				left: 300px;
				top: 250px;
				border: 1px solid black;
				background-color: white;
				transform: rotateX(-10deg);
				background-color: gray;
				transform-style:preserve-3d ;
				animation: change 6s linear 0s infinite normal;
			}
			@keyframes change{
				from{
					transform: rotateY(0deg) rotateX(0deg);
				}
				to{
					transform: rotateY(360deg) rotateX(360deg);
				}
			}
			ul li{
				list-style: none;
				width: 100%;
				height: 100%;
				position: absolute;
				t

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

wotu__

关注关注

4
点赞
踩
14

收藏

觉得还不错? 一键收藏
0
评论
HTML5 利用CSS3 中的3D 模块绘制一个旋转3D正方体

感觉还是比较简单的，直接上图:要做出的效果就是这个立体的正方体，然后再让它自己不停地转动代码展示: &lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;旋转正方体&lt;/title&gt; &lt;style&gt; *{
复制链接

扫一扫