博客园添加3D立方体旋转效果
效果图如下
代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5 3D立体动画照片旋转-原理</title>
<style text="text/css">
.container {
width: 120px;
height: 120px;
margin: 20px;
position: fixed;
z-index: 999;
float: right;
top: 160px;
right: 40px;
transform: rotateY(15deg) rotateX(-15deg);
transform-style: preserve-3d;
animation: xuanzhuan 16s linear infinite;
}
@keyframes xuanzhuan {
0% {
transform: rotateY(15deg) rotateX(45deg);
}
50% {
transform: rotateY(375deg) rotateX(-45deg);
}
100% {
transform: rotateY(735deg) rotateX(45deg);
}
}
.container div.front {
background: white;
transform: translateZ(60px);
}
.container div.back {
background: white;
transform: translateZ(-60px) rotateY(180deg);
}
.container div.left {
background: white;
transform: translateX(-60px) rotateY(-90deg);
}
.container div.right {
background: white;
transform: translateX(60px) rotateY(90deg);
}
.container div.top {
background: white;
transform: translateY(-60px) rotateX(90deg);
}
.container div.bottom {
background: white;
transform: translateY(60px) rotateX(-90deg);
}
.container div {
position: absolute;
left: 0;
top: 0;
width: 120px;
height: 120px;
line-height: 120px;
text-align: center;
font-size: 40px;
}
.container .pic {
width: 120px;
height: 120px;
}
</style>
</head>
<body>
<div class="container">
<!--前面图片 -->
<div class="front">
<img src="https://files.cnblogs.com/files/strongmore/cube01.gif" class="pic">
</div>
<!--后面图片 -->
<div class="back">
<img src="https://files.cnblogs.com/files/strongmore/cube02.gif" class="pic">
</div>
<!--左面图片 -->
<div class="left">
<img src="https://files.cnblogs.com/files/strongmore/cube03.gif" class="pic">
</div>
<!--右面图片 -->
<div class="right">
<img src="https://files.cnblogs.com/files/strongmore/cube04.gif" class="pic">
</div>
<!--上面图片 -->
<div class="top">
<img src="https://files.cnblogs.com/files/strongmore/cube05.gif" class="pic">
</div>
<!--下面图片 -->
<div class="bottom">
<img src="https://files.cnblogs.com/files/strongmore/cube06.gif" class="pic">
</div>
</div>
</div>
</body>
</html>
关于如何给博客园添加自定义js代码，可以查看 博客园Markdown代码块添加复制功能 这篇博客。
