最近發現大佬們博客上絢麗的動態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>