最近发现大佬们博客上绚丽的动态3D立体动画旋转照片，感觉很新颖。先看效果图：
Html 代码如下：
<!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> <style type="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>
另外附上其简单实现demo方便大家学习反思。HTML5 代码如下：
<!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>