博客园美化 —— 旋转立方体效果

博客园美化，旋转立方体

可自行调整位置，并替换图片，示例代码如下：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>立方体效果</title>
	<style type="text/css">
		.wrap {
		    width: 120px;
		    height: 200px;
		    margin: 20px;
		    position: fixed;
		    top: 200px;
		    right: 600px;
		    display: table-cell;
		    vertical-align: middle;
		    text-align: center;
		    z-index: 22;
		}

		.cube {
		    width: 120px;
		    height: 120px;
		    margin: 0 auto;
		    transform-style: preserve-3d;
		    transform: rotateX(-30deg) rotateY(-80deg);
		    animation: rotate linear 20s infinite;
		}

		@-webkit-keyframes rotate {
		    from {
		        transform: rotateX(0deg) rotateY(0deg);
		    }
		    to {
		        transform: rotateX(360deg) rotateY(360deg);
		    }
		}

		.cube div {
		    position: absolute;
		    width: 120px;
		    height: 120px;
		    opacity: 0.8;
		    transition: all .4s;
		}

		.cube .out_front {
		    transform: rotateY(0deg) translateZ(60px);
		}

		.cube .out_back {
		    transform: translateZ(-60px) rotateY(180deg);
		}

		.cube .out_left {
		    transform: rotateY(-90deg) translateZ(60px);
		}

		.cube .out_right {
		    transform: rotateY(90deg) translateZ(60px);
		}

		.cube .out_top {
		    transform: rotateX(90deg) translateZ(60px);
		}

		.cube .out_bottom {
		    transform: rotateX(-90deg) translateZ(60px);
		}
	</style>
</head>
<body>
	<div class="wrap">
	    <div class="cube">
	        <div class="out_front"><img src="https://files-cdn.cnblogs.com/files/cjsblog/cube01.bmp" class="pic"/></div>
	        <div class="out_back"><img src="https://files-cdn.cnblogs.com/files/cjsblog/cube02.bmp" class="pic"/></div>
	        <div class="out_left"><img src="https://files-cdn.cnblogs.com/files/cjsblog/cube03.bmp" class="pic"/></div>
	        <div class="out_right"><img src="https://files-cdn.cnblogs.com/files/cjsblog/cube04.bmp" class="pic"/></div>
	        <div class="out_top"><img src="https://files-cdn.cnblogs.com/files/cjsblog/cube05.bmp" class="pic"/></div>
	        <div class="out_bottom"><img src="https://files-cdn.cnblogs.com/files/cjsblog/cube06.bmp" class="pic"/></div>
	    </div>
	</div>
</body>
</html>

博客设置

将CSS代码粘贴到“页面定制CSS代码”区域，将 div 放到 “博客侧边栏公告”区域

感谢您的阅读，如果您觉得阅读本文对您有帮助，请点一下按钮，您的“推荐”将是我最大的写作动力！
欢迎各位转载，但必须在文章页面中给出作者和原文链接！

posted @ 2022-11-03 15:18 废物大师兄阅读(91) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· 用 WebClient 代替 RestTemplate

· Sentinel 源码学习

· 博客园添加旋转的正方体特效

· 美化博客园

· （四）博客园美化（风格1）：右侧侧边栏美化

公告

昵称：废物大师兄
园龄： 9年2个月
粉丝： 1574
关注： 9

+加关注

2025年3月

日

一

二

三

四

五

六

狂乱的贵公子

人生南北多歧路，君向潇湘我向秦。此后人间多宽敞，南来北往不遇卿。

博客园美化 —— 旋转立方体效果

公告

搜索

常用链接

积分与排名

随笔分类

随笔档案

阅读排行榜

评论排行榜

推荐排行榜

最新评论

喜欢请打赏