當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

解惑：如何使用html+css+js实现旋转相册，立方体相册等动画效果

發(fā)布時間：2025/3/15 编程问答 19 豆豆

生活随笔收集整理的這篇文章主要介紹了解惑：如何使用html+css+js实现旋转相册，立方体相册等动画效果小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

解惑：如何使用html+css+js實現(xiàn)旋轉相冊，立方體相冊等動畫效果

一、前言

?? 最初還是在抖音上看到可以使用簡單地代碼實現(xiàn)炫酷的網頁效果的，但是想要找到可以運行的代碼還是比較困難的，最近突然想起就在網上匯總了一些這樣的代碼。

二、3D效果代碼

2.1、旋轉相冊

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>旋轉相冊</title> <style type="text/css"> body,div,p,ul,ol,li,dl,dt,dd,table,tr,td,form,hr,fieldset,h1,h2,h3,h4,h5,h6,img,input{margin:0;padding:0; } body{background: black; } .content{width: 200px;height: 150px;position: relative;margin:200px auto 0;perspective: 1500px; } .box{width: 200px;height: 150px;transform-style: preserve-3d;transform:rotateX(-30deg);animation:photo 15s linear infinite; } .box:hover{animation:photo 15s linear infinite paused; } .box img{width: 200px;height: 150px;position: absolute;left: 0;top: 0;transform-style: preserve-3d;transition: all 1s; } .box img:nth-child(1){transform:translateZ(280px); } .box img:nth-child(2){transform:rotateY(40deg) translateZ(280px); } .box img:nth-child(3){transform:rotateY(80deg) translateZ(280px); } .box img:nth-child(4){transform:rotateY(120deg) translateZ(280px); } .box img:nth-child(5){transform:rotateY(160deg) translateZ(280px); } .box img:nth-child(6){transform:rotateY(200deg) translateZ(280px); } .box img:nth-child(7){transform:rotateY(240deg) translateZ(280px); } .box img:nth-child(8){transform:rotateY(280deg) translateZ(280px); } .box img:nth-child(9){transform:rotateY(320deg) translateZ(280px); }.box img:nth-child(1):hover{transform:translateZ(280px) scale(1.2); } .box img:nth-child(2):hover{transform:rotateY(40deg) translateZ(280px) scale(1.2); } .box img:nth-child(3):hover{transform:rotateY(80deg) translateZ(280px) scale(1.2); } .box img:nth-child(4):hover{transform:rotateY(120deg) translateZ(280px) scale(1.2); } .box img:nth-child(5):hover{transform:rotateY(160deg) translateZ(280px) scale(1.2); } .box img:nth-child(6):hover{transform:rotateY(200deg) translateZ(280px) scale(1.2); } .box img:nth-child(7):hover{transform:rotateY(240deg) translateZ(280px) scale(1.2); } .box img:nth-child(8):hover{transform:rotateY(280deg) translateZ(280px) scale(1.2); } .box img:nth-child(9):hover{transform:rotateY(320deg) translateZ(280px) scale(1.2); }@keyframes photo{0%{transform:rotateX(-30deg) rotateY(0deg);}100%{transform:rotateX(-30deg) rotateY(360deg);} } </style> </head> <body> <div class="content"><div class="box"><img src="images/1.png" alt=""/><img src="images/2.png" alt=""/><img src="images/3.png" alt=""/><img src="images/4.png" alt=""/><img src="images/5.png" alt=""/><img src="images/6.png" alt=""/><img src="images/7.png" alt=""/><img src="images/8.png" alt=""/><img src="images/9.png" alt=""/></div> </div> </body> </html>

?2.2、旋轉魔方

<!DOCTYPE html> <html> <head><meta charset="utf-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge"><title>Page Title</title><meta name="viewport" content="width=device-width, initial-scale=1"><style>ul{list-style-type: none;margin: 0;padding: 0;}.box{width: 300px;height: 300px;margin: 150px auto;position: relative;font-size: 50px;transform-style: preserve-3d;/*動畫效果*/animation: rotate 10s linear infinite; }.box>div{width: 300px;height: 300px;position: absolute;}li{float: left;width: 90px;height: 90px;margin: 5px;border-radius: 20px;line-height: 90px;text-align: center;}.dv1 li{background-color: orange;transform: skewZ(60deg);}.dv1{background-color: transparent;transform: rotateY(90deg) translateZ(150px);}.dv2{background-color: transparent;transform: rotateY(-90deg) translateZ(150px);}.dv3{background-color: transparent;transform: rotateX(90deg) translateZ(150px);}.dv4{background-color: transparent;transform: rotateX(-90deg) translateZ(150px);}.dv5{background-color: transparent;transform:translateZ(150px);}.dv6{background-color: transparent;transform:translateZ(-150px);}.dv2 li{background-color: green;}.dv3 li{background-color: greenyellow;}.dv4 li{background-color: palevioletred;}.dv5 li{background-color: pink;}.dv6 li{background-color: yellow;}@keyframes rotate{0%{transform: rotateY(0deg) rotateX(0deg);}100%{transform: rotateY(135deg) rotateX(45deg);}}</style> </head> <body><div class="box"><div class="dv1"><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li></ul></div><div class="dv2"><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li></ul></div><div class="dv3"><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li></ul></div><div class="dv4"><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li></ul></div><div class="dv5"><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li></ul></div><div class="dv6"><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li></ul></div></div> </body> </html>

2.3 旋轉立方體相冊

<!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8"><link type="text/css" href="./css/3.css" rel="stylesheet "><title>旋轉立方體相冊</title> </head> <body> <div id="react"><div class="out_front"><img src="./images/1.png" class="out_pic"></div><div class="out_back"><img src="./images/2.png" class="out_pic"></div><div class="out_left"><img src="./images/3.png" class="out_pic"></div><div class="out_right"><img src="./images/4.png" class="out_pic"></div><div class="out_top"><img src="./images/5.png" class="out_pic"></div><div class="out_bottom"><img src="./images/6.png" class="out_pic"></div><span class="in_front"><img src="./images/7.png" class="in_pic"></span><span class="in_back"><img src="./images/8.png" class="in_pic"></span><span class="in_left"><img src="./images/9.png" class="in_pic"></span><span class="in_right"><img src="./images/10.png" class="in_pic"></span><span class="in_top"><img src="./images/11.png" class="in_pic"></span><span class="in_bottom"><img src="./images/12.png" class="in_pic"></span> </div> </body> </html>

? 3.css文件：

<pre name="code" class="css">*{padding:0;margin:0; } body{width:100%;height:100%;background:linear-gradient(darkred 0%,black 100%); } #react{width: 200px;height:200px;margin: 200px auto;transform-style:preserve-3d;animation:rotate 20s infinite;animation-timing-function: linear; } #react div{position:absolute;transition: all .4s; } div .out_pic{width:200px;height:200px;opacity:0.9; } div .in_pic{width:100px;height:100px; } #react span{display:block;position:absolute;width:100px;height:100px;top:50px;left:50px; } @keyframes rotate{from{transform: rotateX(0deg) rotateY(0deg);}to{transform: rotateX(360deg) rotateY(360deg);} }.out_front{transform:translateZ(100px); } .out_back{transform:translateZ(-100px); } .out_left{transform:rotateY(90deg) translateZ(100px); } .out_right{transform: rotateY(-90deg) translateZ(100px); } .out_top{transform:rotateX(90deg) translateZ(100px); } .out_bottom{transform: rotateX(-90deg) translateZ(100px); } .in_front{transform:translateZ(50px); } .in_back{transform:translateZ(-50px); } .in_left{transform:rotateY(90deg) translateZ(50px); } .in_right{transform: rotateY(-90deg) translateZ(50px); } .in_top{transform:rotateX(90deg) translateZ(50px); } .in_bottom{transform: rotateX(-90deg) translateZ(50px); }/*外面的圖片散開*/ #react:hover .out_front{transform:translateZ(200px); } #react:hover .out_back{transform:translateZ(-200px); } #react:hover .out_left{transform:rotateY(90deg) translateZ(200px); } #react:hover .out_right{transform: rotateY(-90deg) translateZ(200px); } #react:hover .out_top{transform:rotateX(90deg) translateZ(200px); } #react:hover .out_bottom{transform: rotateX(-90deg) translateZ(200px); }/*里面的圖片散開*/ #react:hover .in_front{transform:translateZ(100px); } #react:hover .in_back{transform:translateZ(-100px); } #react:hover .in_left{transform:rotateY(90deg) translateZ(100px); } #react:hover .in_right{transform: rotateY(-90deg) translateZ(100px); } #react:hover .in_top{transform:rotateX(90deg) translateZ(100px); } #react:hover .in_bottom{transform: rotateX(-90deg) translateZ(100px); }@charset "utf-8"; /* CSS Document */

2.4 動態(tài)魔方

<!DOCTYPE html> <html> <head><meta charset="utf-8" /> <title>CSS3 魔方</title><style> .wrap {transform-style: preserve-3d;width: 300px; height: 300px; position: relative; /* 定位起點元素 */border-top:solid 1px gray; /* x 軸 */border-left:solid 1px gray; /* y 軸 *//* 傾斜一點方能見立體效果 */transform: rotateX(-30deg) rotateY(-30deg); }/* z 軸正方向 */.zaxis_p { position:absolute; width : 300px;height:1px; border-top:solid 1px gray; /* xy面上，90度立起來就是 z */transform: rotateY(-90deg); /* 立起來的旋轉點 */transform-origin:0 0 0; }/* z 軸負方向 */.zaxis_n { position:absolute; width : 300px;height:1px; border-top:dashed 1px gray; /*（虛線）*/transform: rotateY(90deg);transform-origin:0 0 0; }.block { position: absolute; margin: 0 auto; border:solid 2px black;border-radius:3px;/* 寬高包含邊框 */box-sizing:border-box; transform-origin:0 0 0;}.cube { position: absolute;/* 子元素版面是需要三維空間的 */transform-style: preserve-3d; }.magicBox {position: absolute;transform-style: preserve-3d; }</style> <script> /** 版面 block 類 * direct 方向* color 顏色* size 邊長大小 **/ function Block(direct, color, size){this.direct = direct;this.color = color;this.size = size;// 繪制過的 UI 元素對象this.Element = null;// 在父容器中繪制this.DrawIn = function(cubeElement){var e = this.Element || document.createElement('div');e.style.width = this.size + "px";e.style.height = this.size + "px";var top = (this.direct == 'down' ? this.size : 0);var left = (this.direct == 'right' ? this.size : 0);e.style.top = top + "px";e.style.left = left + "px";e.style.backgroundColor = this.color;var rx = (this.direct == 'up' || this.direct == 'down' ? -90 : 0);var ry = (this.direct == 'left' || this.direct == 'right' ? 90 : 0);;var tz = (this.direct == 'back' ? this.size : 0);e.style["transform"] = "rotateX(" + rx + "deg) rotateY(" + ry + "deg) translateZ(-" + tz + "px)";e.className = "block"; this.Element = e;cubeElement.appendChild(e);}; }/** 魔方格 Cube 類* blockSize 為魔方格的邊長代表大小* directColorArray 為指定方向與顏色的數(shù)組* 形式為 [direct,color,direct,color,...] * x,y,z 為在魔方中的坐標，未指定時默認為0,0,0 **/ function Cube(blockSize, directColorArray, x, y, z){this.x = x | 0; this.y = y | 0; this.z = z | 0;this.blockSize = blockSize;this.blocks = []; /* 根據參數(shù)建立 Block 對象 */for(var i=0; i < directColorArray.length / 2; i++){this.blocks.push(new Block(directColorArray[ i*2 ], directColorArray[ i*2 + 1 ], this.blockSize)); }// 繪制過的 UI 元素對象this.Element = null;// 在父容器中繪制this.DrawIn = function(boxElement, x, y, z){ this.x = x | this.x;this.y = y | this.y;this.z = z | this.z;var e = this.Element || document.createElement('div');e.style.width = this.blockSize + "px";e.style.height = this.blockSize + "px"; e.style["transform"] = this.FormatTransform();e.className = "cube"; for(var i=0; i < this.blocks.length; i++) { this.blocks[i].DrawIn(e);}this.Element = e;boxElement.appendChild(e);};this.Rotate = function(axis, turn, dimension){if(!this.Element) return; // 重繪魔方格this.ReDrawBlocks(axis, turn);// 轉換坐標this.TransCoordinate(axis, turn, dimension);// 先停止動畫效果，逆向 90 度，此時外觀跟旋轉前一致this.Element.style["transition"] = "";var rotateDegs = new Object();rotateDegs[axis] = (turn == 'left' ? -90 : 90); this.Element.style["transform"] = this.FormatTransform(rotateDegs); // 旋轉原點旋轉的層都需要以魔方的中心點旋轉// 旋轉原點是以元素自身來計算的，因所有魔方格都是從(0,0,0)平衡的，因此計算結果都一樣var centerX = this.blockSize * dimension / 2;var centerY = this.blockSize * dimension / 2;var centerZ = -this.blockSize * dimension / 2;this.Element.style["transformOrigin"] = centerX + "px " + centerY + "px " + centerZ + "px";// 這樣才能觸發(fā)動畫setTimeout(function(obj){return function(){obj.Element.style["transform"] = obj.FormatTransform(); obj.Element.style["transition"] = "transform 0.5s"; // 0.3 秒};}(this), 1);}/** 坐標轉換* axis 軸向* turn 轉向* dimension 階數(shù)**/this.TransCoordinate = function(axis, turn, dimension){ if(axis == 'x'){ if( turn == 'left' ){var oriy = this.y;this.y = this.z;this.z = dimension - 1 - oriy;} else {var oriz = this.z;this.z = this.y;this.y = dimension - 1 - oriz;}} else if(axis == 'y'){if( turn == 'right' ){var orix = this.x;this.x = this.z;this.z = dimension - 1 - orix;} else {var oriz = this.z;this.z = this.x;this.x = dimension - 1 - oriz;}} else if(axis == 'z'){ if( turn == 'right' ){var orix = this.x;this.x = this.y;this.y = dimension - 1 - orix;} else {var oriy = this.y;this.y = this.x;this.x = dimension - 1 - oriy;}} }/** 將各 block 調整位置，重繪魔方格* axis 軸向* turn 轉向**/this.ReDrawBlocks = function(axis, turn){var xyzDirects = [];xyzDirects['x'] = ["front", "up", "back", "down"]; xyzDirects['y'] = ["front", "right", "back", "left"]; xyzDirects['z'] = ["up", "right", "down", "left"]; var curDirects = xyzDirects[axis];for(var i=0; i < this.blocks.length; i++) { var index = curDirects.indexOf( this.blocks[i].direct );if(index > -1){var newIndex = turn == 'left' ? (index + 1) % 4 : (index + 4 - 1) % 4;this.blocks[i].direct = curDirects[newIndex]; this.blocks[i].DrawIn(this.Element);} }}// 格式仳 transform 屬性// css3 把旋轉與平移混一起（真不好用）this.FormatTransform = function (rotateDegs){ var rotatePart = "rotateX(0deg) rotateY(0deg) rotateZ(0deg)";if(rotateDegs){rotatePart = "rotateX(" + (rotateDegs.x | 0) + "deg) rotateY(" + (rotateDegs.y | 0) + "deg) rotateZ(" + (rotateDegs.z | 0) + "deg)";} return rotatePart + " translate3d(" + (this.x * this.blockSize) + "px," + (this.y * this.blockSize) + "px,-" + (this.z * this.blockSize) + "px) "; } }/** 魔方 MagicBox 類* dimension 階數(shù)* blockSize 每小格大小**/ function MagicBox(dimension, blockSize){this.dimension = dimension;this.blockSize = blockSize;this.cubes = [];this.MakeDefaultCubes = function(){this.cubes = [];for(var x=0; x < this.dimension; x++){for(var y=0; y < this.dimension; y++){for(var z=0; z < this.dimension; z++){var cube = this.MakeDefaultCube(x, y, z);if(cube){this.cubes.push(cube);}}}}};/* 根據魔方格在階數(shù)中的位置生成魔方格，魔方內部的格子忽略 */this.MakeDefaultCube = function(x, y, z){var max = this.dimension - 1;var dc = [];if(x == 0) dc.push("left", "orange"); else if(x == max) dc.push("right", "red");if(y == 0) dc.push("up", "yellow"); else if(y == max) dc.push("down", "white"); if(z == 0) dc.push("front", "blue"); else if(z == max) dc.push("back", "green");if(dc.length == 0) return null;var cube = new Cube(this.blockSize, dc, x, y, z); return cube;}// 構造時自動產生初始魔方格this.MakeDefaultCubes();// 繪制過的 UI 元素對象this.Element = null;// 在父容器中繪制this.DrawIn = function(domElement){ var e = this.Element || document.createElement('div');e.style.width = (this.dimension * this.blockSize) + "px";e.style.height = (this.dimension * this.blockSize) + "px"; e.className = "magicBox"; for(var i=0; i < this.cubes.length; i++) { this.cubes[i].DrawIn(e);}this.Element = e;domElement.appendChild(e);}; /** MagicBox.Rotate 旋轉* axis 軸向* level 層* turn 轉向**/this.Rotate = function(axis, level, turn){for(var i=0; i < this.cubes.length; i++) { if(this.cubes[i][axis] == level) { // 該軸該層的才旋轉this.cubes[i].Rotate(axis, turn, this.dimension); }}}; } function onload(){//* 魔方繪制示例var magicBox = new MagicBox(3, 50);magicBox.DrawIn( document.querySelector(".wrap") ); var rotates = GenRotateActions(3, 5);for(var i=0; i<rotates.length; i++){ setTimeout(function(magicBox, rotate){return function(){magicBox.Rotate(rotate.axis, rotate.level, rotate.turn);};}(magicBox, rotates[i]), 3000 + 800 * i);}for(var i=0; i<rotates.length; i++){ setTimeout(function(magicBox, rotate){return function(){magicBox.Rotate(rotate.axis, rotate.level, (rotate.turn == 'left' ? 'right' : 'left'));};}(magicBox, rotates[rotates.length -1 - i]), 1000 + 8800 + 800 * i);} }/** 產生一個指定數(shù)量的旋轉序列數(shù)組* dimension 魔方階數(shù)* count 序列數(shù)量**/ function GenRotateActions(dimension, count){var result = [];for(var i=0; i<count; i++){result[i] = {axis : ['x','y','z'][Math.floor(Math.random() * 3)],level : Math.floor(Math.random() * dimension), turn : ['left','right'][Math.floor(Math.random() * 2)]};}return result; } </script> </head><body style="padding:300px;" οnlοad="onload()"><div class="wrap"><div class="zaxis_p"></div> <div class="zaxis_n"></div> </div> </body></html>

?2.5 二十面體

<html> <head> <title>二十面體</title> <style type="text/css"> html, body { height: 100%; margin: 0; background: rgba(0, 0, 0,1); } .sharp { animation: ani 4s linear infinite; } div { transform-style: preserve-3d; transform: translate(-50%, -50%) rotate3d(0, 1, 0, 72deg); position: absolute; left: 50%; top: 50%; } span { /*利用邊框做一個三角形*/ border-color: transparent transparent rgba(255, 255, 255, 0.5) transparent;/*每個span下方設置顏色，其余邊透明*/ border-width: 173.2px 100px; border-style: solid; width: 0; height: 0; position: absolute; left: 50%; margin-left: -100px; top: 50%; margin-top: -346.4px; }span:before { /*利用邊框在span中做一個三角形，實現(xiàn)嵌套，讓span變成邊框,span:before變成要顯示的東西*/ content: ''; border-color: transparent transparent rgba(0, 123, 123, 0.5) transparent;/*設置每面的顏色*/ border-width: 165.2px 92px; border-style: solid; width: 0; height: 0; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin-top: 4px; }div span:nth-child(1) { transform: rotate3d(0, 1, 0, 72deg) rotate3d(1, 0, 0, 51.5deg); }div span:nth-child(2) { transform: rotate3d(0, 1, 0, 144deg) rotate3d(1, 0, 0, 51.5deg); }div span:nth-child(3) { transform: rotate3d(0, 1, 0, 216deg) rotate3d(1, 0, 0, 51.5deg); }div span:nth-child(4) { transform: rotate3d(0, 1, 0, 288deg) rotate3d(1, 0, 0, 51.5deg); }div span:nth-child(5) { transform: rotate3d(0, 1, 0, 360deg) rotate3d(1, 0, 0, 51.5deg); }.sharp div:nth-child(1) { transform: translateY(51px) rotateY(108deg) rotateX(116deg) translateZ(31px); }.sharp div:nth-child(2) { transform: translateY(51px) rotateY(180deg) rotateX(116deg) translateZ(31px); }.sharp div:nth-child(3) { transform: translateY(51px) rotateY(252deg) rotateX(116deg) translateZ(31px); }.sharp div:nth-child(4) { transform: translateY(51px) rotateY(324deg) rotateX(116deg) translateZ(31px); }.sharp div:nth-child(5) { transform: translateY(51px) rotateY(396deg) rotateX(116deg) translateZ(31px); }@keyframes ani { 100% { transform: rotateY(360deg); } } </style> </head> <body> <div class="sharp"> <div> <span></span> <span></span> <span></span> <span></span> <span></span> </div> <div> <span></span> <span></span> <span></span> <span></span> <span></span> </div> <div> <span></span> <span></span> <span></span> <span></span> <span></span> </div> <div> <span></span> <span></span> <span></span> <span></span> <span></span> </div> <div> <span></span> <span></span> <span></span> <span></span> <span></span> </div> <div> <span></span> <span></span> <span></span> <span></span> <span></span> </div> </div> </body> </html>

2.6 3D相冊拖拽動畫

<!DOCTYPE HTML> <html onselectstart='return false'><head><meta http-equiv="Content-Type" content="text/html;charset=utf-8" /><meta name="keywords" content="" /><meta name="description" content="" /><title>3D相冊拖拽動畫</title><style type="text/css">*{ margin:0; padding:0;}body{ background:#000; width:100%; height:100%; overflow:hidden}#wrap{ width:133px; height:200px; margin:25% auto 0;position:relative;top:-100px;transform-style:preserve-3d;transform:perspective(800px) rotateX(-10deg) rotateY(0deg);}#wrap ul li{list-style:none;width:120px;height:120px;position:absolute;top:0;left:0;border-radius:3px;box-shadow:0 0 10px #fff;background-size:100%;transform:rotateY(0deg) translateZ(0px);-webkit-box-reflect:below 10px -webkit-linear-gradient(top,rgba(0,0,0,0) 40%,rgba(0,0,0,.5) 100%);}#wrap p{ width:1200px; height:1200px; position:absolute; border-radius:100%;left:50%; top:100%; margin-left:-600px; margin-top:-600px;background:-webkit-radial-gradient(center center,600px 600px,rgba(50,50,50,1),rgba(0,0,0,0));transform:rotateX(90deg);}</style></head><body><div id="wrap"><ul><li style="background-image:url(images/1.png);"></li><li style="background-image:url(images/2.png);"></li><li style="background-image:url(images/3.png);"></li><li style="background-image:url(images/4.png);"></li><li style="background-image:url(images/5.png);"></li><li style="background-image:url(images/6.png);"></li><li style="background-image:url(images/7.png);"></li><li style="background-image:url(images/8.png);"></li><li style="background-image:url(images/9.png);"></li><li style="background-image:url(images/10.png);"></li><li style="background-image:url(images/11.png);"></li></ul><p></p></div><script src="./js/jquery-1.8.3.js"></script><script>$(function(){var oL = $('#wrap ul li').size();var Deg = 360/oL;var xDeg = 0,yDeg = -10,xs,ys,p=null;for (var i=oL-1;i>=0;i--){$('#wrap ul li').eq(i).css({transition:"1s "+(oL-i)*0.15+"s transform,.5s "+(1+oL*0.15)+"s opacity",'transform':'rotateY('+Deg*i+'deg) translateZ(350px)'});}$(document).mousedown(function(e){clearInterval(p);var x1 = e.clientX;var y1 = e.clientY;$(this).bind('mousemove',function(e){xs = e.clientX - x1;ys = e.clientY - y1;x1 = e.clientX;y1 = e.clientY;xDeg += xs*0.3;yDeg -= ys*0.1;$('#wrap').css('transform',"perspective(800px) rotateX("+yDeg+"deg) rotateY("+xDeg+"deg)");});}).mouseup(function(){$(this).unbind('mousemove');p = setInterval(function(){if(Math.abs(xs)<0.5&&Math.abs(ys)<0.5){clearInterval(p)};xs = xs*0.95;ys = ys*0.95xDeg += xs*0.3;yDeg -= ys*0.1;$('#wrap').css('transform',"perspective(800px) rotateX("+yDeg+"deg) rotateY("+xDeg+"deg)");},30);});});</script></body> </html>

2.7 旋轉相冊

<!DOCTYPE html> <html><head><meta charset="UTF-8"><title></title><style type="text/css">body{background: #06081B;perspective: 5000px;}.show{perspective: 5000px;-webkit-transform: rotateX(-45deg);-moz-transform: rotateX(-45deg);transform: rotateX(-45deg);transform-style: preserve-3d;}.box{position: relative;width: 150px;height: 250px;border: 1px solid red;margin: 300px auto;transform-style: preserve-3d;-webkit-animation: rotate1 10s linear infinite;-moz-animation: rotate1 10s linear infinite;animation: rotate1 10s linear infinite;}.box img{width: 150px;height: 250px;border: 1px solid #ccc;position: absolute;left: 0;top: 0;-webkit-box-reflect: below 20px -webkit-linear-gradient(top,rgba(250,250,250,0),rgba(250,250,250,0) 30%,rgba(250,250,250,0.5));}.img1{-webkit-transform: translateZ(300px);-moz-transform: translateZ(300px);transform: translateZ(300px);}.img2{-webkit-transform:rotateY(36deg) translateZ(300px) ;-moz-transform:rotateY(36deg) translateZ(300px) ;transform:rotateY(36deg) translateZ(300px) ;}.img3{-webkit-transform:rotateY(72deg) translateZ(300px);-moz-transform:rotateY(72deg)g) translateZ(300px) ;transform:rotateY(72deg) (300px) ;}.img4{-webkit-transform: rotateY(108deg) translateZ(300px);-moz-transform:rotateY(108deg) translateZ(300px) ;transform:rotateY(108deg) translateZ(300px) ;}.img5{-webkit-transform: rotateY(144deg) translateZ(300px);-moz-transform:rotateY(144deg) translateZ(300px) ;transform:rotateY(144deg) translateZ(300px) ;}.img6{-webkit-transform:rotateY(180deg) translateZ(300px) ;-moz-transform:rotateY(180deg) translateZ(300px) ;transform:rotateY(180deg) translateZ(300px) ;}.img7{-webkit-transform:rotateY(216deg) translateZ(300px) ;-moz-transform:rotateY(216deg) translateZ(300px) ;transform: rotateY(216deg) translateZ(300px);}.img8{-webkit-transform:rotateY(252deg) translateZ(300px) ;-moz-transform:rotateY(252deg) translateZ(300px) ;transform:rotateY(252deg) translateZ(300px) ;}.img9{-webkit-transform:rotateY(288deg) translateZ(300px) ;-moz-transform:rotateY(288deg) translateZ(300px) ;transform:rotateY(288deg) translateZ(300px) ;}.img10{-webkit-transform:rotateY(324deg) translateZ(300px) ;-moz-transform:rotateY(324deg) translateZ(300px) ;transform:rotateY(324deg) translateZ(300px) ;}@-moz-keyframes rotate1{0%{-webkit-transform: rotateY(0deg);-moz-transform: rotateY(0deg);transform: rotateY(0deg);}100%{-webkit-transform: rotateY(360deg);-moz-transform: rotateY(360deg);transform: rotateY(360deg);}}@-webkit-keyframes rotate1{0%{-webkit-transform: rotateY(0deg);-moz-transform: rotateY(0deg);transform: rotateY(0deg);}100%{-webkit-transform: rotateY(360deg);-moz-transform: rotateY(360deg);transform: rotateY(360deg);}}</style></head><body><div class="show"><div class="box"><img src="images/1.png" class="img1"/><img src="images/2.png" class="img2"/><img src="images/3.png" class="img3" /><img src="images/4.png" class="img4" /><img src="images/5.png" class="img5"/><img src="images/6.png" class="img6"/><img src="images/7.png" class="img7" /><img src="images/8.png" class="img8" /><img src="images/9.png" class="img9" /><img src="images/10.png" class="img10" /></div></div></body> </html>

2.8 旋轉相冊

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE> <html> <head lang="en"><meta charset="UTF-8"><title></title><style>p{ color:red; }*{ padding: 0; margin: 0; border: none; outline: none; box-sizing: border-box; } *:before,*:after{ box-sizing: border-box; } html,body{ min-height: 100%; } body{ background:#99FF00 background-image: radial-gradient(mintcream 0%, lightgray 100%);; } .Container{ margin: 4% auto; width: 210px; height: 140px; position: relative; perspective: 1000px; } #carousel{ width: 100%; height: 100%; position: absolute; transform-style:preserve-3d; animation: rotation 20s infinite linear; } #carousel:hover{ animation-play-state: paused; } #carousel figure{ display: block; position: absolute; width: 220px; height: 200px; left: 10px; top: 10px; background: black; overflow: hidden; border: solid 5px black; } img{ filter: grayscale(0); cursor: pointer; transition:all 0.3s ease 0s; width: 100%; height: 100%; } img:hover{ filter: grayscale(1); transform: scale(1.2,1.2); } #carousel figure:nth-child(1){transform: rotateY(0deg) translateZ(288px);} #carousel figure:nth-child(2) { transform: rotateY(60deg) translateZ(288px);} #carousel figure:nth-child(3) { transform: rotateY(120deg) translateZ(288px);} #carousel figure:nth-child(4) { transform: rotateY(180deg) translateZ(288px);} #carousel figure:nth-child(5) { transform: rotateY(240deg) translateZ(288px);} #carousel figure:nth-child(6) { transform: rotateY(300deg) translateZ(288px);} @keyframes rotation{ from{ transform: rotateY(0deg); } to{ transform: rotateY(360deg); } } </style><script>window.οnlοad=function(){var story = document.getElementById('word');var s = document.getElementById('show');var i = 0;timer=setInterval(function(){s.innerHTML=story.innerHTML.substring(0,i);i++;if(s.innerHTML==story.innerHTML){clearInterval(timer);}},200);}</script> </head> <body ><p id="word" style="display:none;"><strong>***************<br>@@@@@@@@@@@@@@@@@@@@@@@@@<br>%%%%%%%%%%%%%%%%%%%%%%%%%%%</p><p id="show"></p><div class="Container"><div id="carousel"> <figure><img src="images/1.jpg" ></figure><figure><img src="images/2.jpg"></figure> <figure><img src="images/3.jpg" ></figure> <figure><img src="images/4.jpg" ></figure> <figure><img src="images/5.jpg"></figure> <figure><img src="images/6.jpg" ></figure> </div> </div> </body> </html>

2.9 旋轉立方體相冊

<!doctype html> <html> <head> <meta charset="utf-8"/> <title></title> <style type="text/css"> .eyes{ perspective: 1000px; } .box{ /*設置3D效果*/ transform-style: preserve-3d; /*盒子的大小*/ width: 200px; height: 200px; background: red; /*設置盒子的位置，便于觀察*/ margin: 400px auto; /*復合方式設置動畫三者分別為：動畫名執(zhí)行一次時間執(zhí)行方式*/ animation: zhuan 3s ease; /*令動畫無限執(zhí)行下去*/ animation-iteration-count: infinite; animation-timing-function: linear; } .box div{ width: 200px; height: 200px; opacity: 1; /*設置過渡*/ transition: all 1s ease 0s; position: absolute; } /*調整位置，制作成一個六邊形*/ .box .div1{ background: green; transform: translateZ(100px); } .box .div2{ background: green; transform: translateZ(-100px); } .box .div3{ background: green; transform: rotateX(90deg) translateZ(100px); } .box .div4{ background: green; transform: rotateX(270deg) translateZ(100px); } .box .div5{ background: green; transform: rotateY(-90deg) translateZ(100px); } .box .div6{ background: green; transform: rotateY(90deg) translateZ(100px); } /*添加3D旋轉效果讓其繞X、Y軸同時旋轉90度*/ @keyframes zhuan{ from{ transform: rotateX(0deg) rotateZ(0deg) rotateY(0deg); } to{ transform: rotateX(360deg) rotateZ(360deg) rotateY(360deg); } } /*給正方體添加一個hover效果*/ .box:hover .div1{ transform: translateZ(200px); } .box:hover .div2{ transform: translateZ(-200px); } .box:hover .div3{ transform: rotateX(90deg) translateZ(200px); } .box:hover .div4{ transform: rotateX(270deg) translateZ(200px); } .box:hover .div5{ transform: rotateY(-90deg) translateZ(200px); } .box:hover .div6{ transform: rotateY(90deg) translateZ(200px) } </style> </head> <body> <div class="eyes"> <div class="box"> <div class="div1"><img src="images/1.jpg" width="100%" height="100%"></div> <div class="div2"><img src="images/2.jpg" width="100%" height="100%"></div> <div class="div3"><img src="images/3.jpg" width="100%" height="100%"></div> <div class="div4"><img src="images/4.jpg" width="100%" height="100%"></div> <div class="div5"><img src="images/5.jpg" width="100%" height="100%" ></div> <div class="div6"><img src="images/6.jpg" width="100%" height="100%" ></div> </div> </div> </body> </html>

三、總結

?? 由此可以看出基本上所有的動畫都需要依靠一些庫函數(shù)已經瀏覽器的渲染能力來實現(xiàn)。

?? 所有源碼

轉載于:https://www.cnblogs.com/zyrblog/p/11142624.html

總結

以上是生活随笔為你收集整理的解惑：如何使用html+css+js实现旋转相册，立方体相册等动画效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： drf认证组件源码分析
下一篇： Python学习笔记（二）——Hello