博客园美化 - 3D立体动画照片旋转(HTML5)

草原千里 發表於 2019-9-14 10:32:00

博客园美化 - 3D立体动画照片旋转(HTML5)

最近发现大佬们博客上绚丽的动态3D立体动画旋转照片，感觉很新颖。先看效果图：
<img src="https://img2018.cnblogs.com/blog/1152824/201909/1152824-20190914102854177-1967408610.gif" alt="" width="690" height="568">
 
Html 代码如下：
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html>
<head>
 <title>HTML5 3D立体动画照片旋转</title>
 <meta charset="utf-8" />
 <link href="css/style.css" rel="stylesheet" type="text/css" />
 <style text="text/css" >
 /*实现立体效果*/
 .img {
 width: 50px;
 height: 50px;
 margin: 0 auto;
 transform-style: preserve-3d;
 /*设置动画播放样式:动画对象播放速度时间播放次数*/
 animation: rotate linear 20s infinite;
 }
 /*实现动画效果*/
 @-webkit-keyframes rotate { /*sofari chrome*/
 from {
 transform: rotateX(0deg) rotateY(0deg);
 }
 to {
 transform: rotateX(360deg) rotateY(360deg);
 }
 }
 /*图片样式*/
 .pic{
 width: 200px;
 height: 200px;
 transform: rotateY(0deg) translateZ(100px);
 }
 </style>
 <styletype="text/css">
 /*最外层容器样式*/
 .wrap {
 width: 100px;
 height: 100px;
 margin: 150px;
 position: relative;
 }

 /*得到立方体效果*/
 .cube {
 width: 50px;
 height: 50px;
 margin: 0 auto;
 transform-style: preserve-3d;
 /*设置动画播放样式:动画对象播放速度时间播放次数*/
 animation: rotate linear 20s infinite;
 }

 /*动画旋转的方式*/
 /*得到动画效果*/
 @-moz-keyframes rotate { /*firefox*/
 from {
 transform: rotateX(0deg) rotateY(0deg);
 }
 to {
 transform: rotateX(360deg) rotateY(360deg);
 }
 }
 @-webkit-keyframes rotate { /*sofari chrome*/
 from {
 transform: rotateX(0deg) rotateY(0deg);
 }
 to {
 transform: rotateX(360deg) rotateY(360deg);
 }
 }
 @-o-keyframes rotate { /*opera*/
 from {
 transform: rotateX(0deg) rotateY(0deg);
 }
 to {
 transform: rotateX(360deg) rotateY(360deg);
 }
 }
 /*每张图片的样式*/
 .cube div {
 position: absolute;
 width: 200px;
 height: 200px;
 opacity: 0.8;
 /*过渡效果*/
 transition: all .4s;
 }

 /*定义所有图片样式*/
 .pic {
 width: 200px;
 height: 200px;
 }

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

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

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

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

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

 .cube .out_bottom {
 transform: rotateX(-90deg) translateZ(100px);
 }

 /*定义小正方体样式*/
 .cube span {
 display: block;
 width: 100px;
 height: 100px;
 position: absolute;
 top: 50px;
 left: 50px;
 }

 .cube .in_pic {
 width: 100px;
 height: 100px;
 }

 .cube .in_front {
 transform: rotateY(0deg) translateZ(50px);
 }

 .cube .in_back {
 transform: translateZ(-50px) rotateY(180deg);
 }

 .cube .in_left {
 transform: rotateY(-90deg) translateZ(50px);
 }

 .cube .in_right {
 transform: rotateY(90deg) translateZ(50px);
 }

 .cube .in_top {
 transform: rotateX(90deg) translateZ(50px);
 }

 .cube .in_bottom {
 transform: rotateX(-90deg) translateZ(50px);
 }

 /*鼠标移入后样式*/
 .cube:hover .out_front {
 transform: rotateY(0deg) translateZ(200px);
 }

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

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

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

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

 .cube:hover .out_bottom {
 transform: rotateX(-90deg) translateZ(200px);
 }
 </style>

 <script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
</head>
<body>
 <div class="wrap">
 
 <div class="cube">
 
 <div class="out_front">
 <img src="https://i.loli.net/2018/10/04/5bb5f270969f2.jpeg" class="pic">
 </div>
 
 <div class="out_back">
 <img src="https://i.loli.net/2018/10/04/5bb5f23ce7f1e.jpg" class="pic">
 </div>
 
 <div class="out_left">
 <img src="https://i.loli.net/2018/10/04/5bb5f26e13b28.jpg" class="pic">
 </div>
 
 <div class="out_right">
 <img src="https://i.loli.net/2018/10/07/5bb9b1ca97948.jpg" class="pic">
 </div>
 
 <div class="out_top">
 <img src="https://i.loli.net/2018/10/04/5bb5f2725c5c7.jpg" class="pic">
 </div>
 
 <div class="out_bottom">
 <img src="https://i.loli.net/2018/10/04/5bb5f27af2e28.jpg" class="pic">
 </div>
 
 <span class="in_front">
 <img src="https://i.loli.net/2018/10/07/5bb9b2e441d7a.jpg" class="in_pic">
 </span>

 <span class="in_back">
 <img src="https://i.loli.net/2018/10/07/5bb9b2e712b3f.jpg" class="in_pic">
 </span>

 <span class="in_left">
 <img src="https://i.loli.net/2018/10/07/5bb9b2e86ad25.jpg" class="in_pic">
 </span>

 <span class="in_right">
 <img src="https://i.loli.net/2018/10/07/5bb9b2eaba148.jpg" class="in_pic">
 </span>

 <span class="in_top">
 <img src="https://i.loli.net/2018/10/07/5bb9b2ebe5bd9.jpg" class="in_pic">
 </span>
 <span class="in_bottom">
 <img src="https://i.loli.net/2018/10/07/5bb9b2ed867be.jpg" class="in_pic">
 </span>

 </div>

 </div>
</body>

</html></pre>
</div>
 
 
另外附上其简单实现demo方便大家学习反思。HTML5 代码如下：
<div class="cnblogs_code">
<pre><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5 3D立体动画照片旋转-原理</title>
<style text="text/css" >
 .container{
 width: 200px;
 height: 200px;
 position: relative;
 margin:50px auto;
 transform: rotateY(15deg) rotateX(-15deg);
 transform-style: preserve-3d;
 animation:xuanzhuan 8s linear infinite;
 }
 @keyframes xuanzhuan{
 0%{
 transform: rotateY(15deg) rotateX(45deg);
 }
 50%{
 transform: rotateY(375deg) rotateX(-45deg);
 }
 100%{
 transform: rotateY(735deg) rotateX(45deg);
 }
 }
 .container:hover{
 animation-play-state: paused;
 }
 .container div.front{
 background: red;
 transform: translateZ(100px);
 }
 .container div.back{
 background: green;
 transform: translateZ(-100px) rotateY(180deg);
 }
 .container div.left{
 background: blue;
 transform:translateX(-100px) rotateY(-90deg);
 }
 .container div.right{
 background: yellow;
 transform:translateX(100px) rotateY(90deg);
 }
 .container div.top{
 background: pink;
 transform:translateY(-100px) rotateX(90deg);
 }
 .container div.bottom{
 background: orange;
 transform:translateY(100px) rotateX(-90deg);
 }
 .container div{
 position: absolute;
 left:0;
 top:0;
 width: 200px;
 height: 200px;
 line-height: 200px;
 text-align: center;
 font-size: 40px;
 }
</style>
</head>
<body>
<div class="container">
 <div class="front">front</div>
 <div class="back">back</div>
 <div class="left">left</div>
 <div class="right">right</div>
 <div class="top">top</div>
 <div class="bottom">bottom</div>
</div>
</body>
</html></pre>
</div> 
来源：https://www.cnblogs.com/zhoux955792/p/11518527.html

頁: [1]

琼殿技术论坛's Archiver

博客园美化 - 3D立体动画照片旋转(HTML5)