【HTML】css3实现旋转的立方体相册

立体相册源码

 使用时请保存为*.html格式

<!DOCTYPE HTML>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>少莫千华立体相册</title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
        img{
	width:100%;
	height:100%;
	background-repeat:no-repeat; 
	background-size:100% 100%;
	-moz-background-size:100% 100%;
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIAAAACACAYAAADDPmHLAAAACXBIWXMAABJ0AAASdAHeZh94AAAAB3RJTUUH4woNBTEsFpCqSgAAAAd0RVh0QXV0aG9yAKmuzEgAAAAMdEVYdERlc2NyaXB0aW9uABMJISMAAAAKdEVYdENvcHlyaWdodACsD8w6AAAADnRFWHRDcmVhdGlvbiB0aW1lADX3DwkAAAAJdEVYdFNvZnR3YXJlAF1w/zoAAAALdEVYdERpc2NsYWltZXIAt8C0jwAAAAh0RVh0V2FybmluZwDAG+aHAAAAB3RFWHRTb3VyY2UA9f+D6wAAAAh0RVh0Q29tbWVudAD2zJa/AAAABnRFWHRUaXRsZQCo7tInAAAgAElEQVR4nO2dd5xeVZ3/P99zbnna9MmUTCaZJFIiIBKpUhIkhLCCCibI6k/X3VXcdX+iq7JrWRusLsrqrt0Vy2IDEgWlCwkEEmogpJCe6b09M0+97Zzz/f0xicQQpGUKv5n365VXZua5z/N8z73ve+7ph5gZM0xfxGQHMMPkMiPANGdGgGnOjADTnBkBpjkzAkxzZgSY5swIMM2ZEWCaMyPANGdGgGnOjADTnBkBpjkzAkxzZgSY5swIMM2ZEWCaMyPAhECEjVTe8wzFJzuSw6GpNCRsya3vvsSL2W8iiE4ie8sT77hp+2THdDSINljnWYJuZ4UcSDwSKb7ZfVt472THBUyxHEAKXOTOSnxVWPiFCb1tp//+r5899TdXrpzsuF4rWstuHaBEODRPJPj9bhL3RA8mH+y9+5S5kx3blBKgQfK1uivbpwMFMEM69GYi8+sTVl1yGhHRZMcHAG0PkRuts+/kR+3H9IPuQ2aD/YPw4dTK1atXv+i59BEOMSONCFAZACFDEJ//77/KLU+lGiomMPwXMKUE+OXltw1Kzb8XMQtsGCZU0Dmd87Y0n1pfXt8w2fEBQNP5CJnRSRV0lkzwUhGnf3TKozUrSv7uN2eeuTJ2pPe4AiVgpHDwaRsDVm9Mrv3BLdIuL3fnTGD4L2BKCQAAMSGeFGbsTJEtoXv9vUFbWsmUdCY5tAMwf3WD+rjXxXtgDtzReUakoksj/4m3ES1+QUHPNrTQjlHSaMByGf3d1vBHv1f1ECD2d3W1TGo5x5rMLz8S5Tbac5EBiAADqKFwiJQaFiKWnuzYDvKVr3CUudv+dtzGD8gDAI1CUF3o6K+bD7Q9DcA79Hg28iTEABMAJIB9PU77R9+eblx5TqFWrbeXk+EFYCrF2ENOkWO2FIZn/aLknX27xjstU06AfuhRo8ZOFBuACzKvEWUlUJzs2A5l86D62blx61rLpmqwgBSeWDA7G//QxaaJ19nzYFG1UnyMlKghxrvNQSV8wjknFhefc2ZxMVyMic4EMMb+EQBbrEhZmU/33P6md8++bNsd45mOKSeAkdJnZTSRkNAG7OU8gvQ7Ojr0pAb2NFkYRYIdt1QZ3XDufFHJClkmVJuQUF3ilT341dYvJmKIUwksxBi2JCAARAaIfMByGEYL5HNULAzB8wLhKQUVKCgpQLYFyxgQERBKwXduSC/7+keO3Z4Z2Ns6XsmacgJYwpiAwSAaywEiExEoAmAOPe7ie99Xkg70yRTqGAmqYMvS2ogOP4Wd25f/6jXlFvvuIacpJm+x4tSkiygCkIBVwUClUDphu5REQgIBQxfGblzbIitSZHUNUf9oG2X6M85Q14Dory4zyYvPKK6wHAjFlv73W+p+s2a9bo40FQeyslD0RKAMKyIyUgJglgCgfIF4wvCs8qCGiDqYeVxugCknACtDB8umzAxorQhC82EtVtL41RSJ22RNYpbOhwAzhIkQy3Dn6bdf+QRH8rebrvj16lcTwzGPI/KW0q1hUXw7Wce1IACaAQUgJHhZ0tlBMVrwhddYHc2xLEApNv/y88qbfviHsu2AKSK0i4AzsPH7+z4m4xAQwH0PVT167Y3xp0vKvFYt7X227fslFRwK21ZWcUxwpXgs8ZUhlUppPC/Mj9fFByZQgC+tWWU/5FgX5oPkns1X/KT5xY4jSzDCAz9j7LbXoBecgLve/rvWC390yVvzBfVTVMfOY8MwSkNYslG4opGSYtVbfn7FaZv/bs2/HC7PS3Idcxy49a0nzdty1eXZD9eX6ZNDDWc0L7xdHVbfjs7E4LN77UFhcbjlu91fKk9wORREzjM+Qt5TX2/2ZLMoXLZsgM44NjwJDqNtb6rrHV+svgvw9uYyrfcz/3mONllMmAB7iN+KEutuKhbbT/rwh8/efuON3Uc8MGILJA5r9AmPeOgD/3DX/gVEqyquWfpP8oTyj8iaeK3xFFQ2hHAFyMY/H7Pi/AeJ6P5Xcxc9tr19D9GS64DR+UBQA2gbEBpOWIzFKOtn3V5j8FYkeBWKDiRVGiA/0NPT1QUA/CQ1IbKOyQ+52etuqbr9mlVdje9flp974nznGH68bCOdNfjsK43paDNhAgwyvS0KDOwSzPPjvR8pIfpmjjlz+HEMxEmQBB8sEv9lWpgHiOjahccuvK/iAws+KuaXvFtUxOJgA0mWBIsz6oHtALpeTdzMD2eIaOucOXOcscs6S3OwRx18Pf+Afa0pmosyRct6YEtpP6AKABFvchtM0bpY2gAiQ1//m64rqxvMLIix6i28LMKHk7e3djd89rj37t3zamI7GkyYAEVjLjGhBlkEcsNTShBrArD18OPqmMrapYDRBswMMvySWeWBu/vxMqLnZi97022Jt9W/H+X2SWogyET7OiKnenYlXqUABz6fAQQv+PvjFEum0N3d5XytcxgX3/TJXRef+obwHbzBaiChm2QlgAIhldQlUlBysEeMlsRMqS1JCMFwSqPL5jd0Ltl389yrjvnrjt+92vheCxMiwHtXrzoNtlxsAg0pLZDNcYJTsWjRInvXrl3RoccWIWqEJWCUARigiNWhr5+zZtVVpix+osr6T/f31N3SfvV3/vR8yDDnANxeRfR4imadoONUa1XYGkl79LWmYWA9JSuMdae0UG4UPGMgbCnmQoq6OXVGzKktAkzIFCjb3msNDWbFhp4hObS3xxlu7bX93Z1OZlurNbD+Gz0fOPE49RZVIPAI4JSpyoaq4ZvevvTk/Xev3/qCG2K8mRAB+th8ADEXyI1dKy6yJyCcfD7/gqboIvMiIwkgBrRtOCxRZIV/ygVcxgVBQl5hGRu19QMff/PXV75/y7/+duehnzHM3LeIaDhTVl/CUpqO9vbca01DzVIUg7VotqvoQyILwAF6O2Ndz7XIO9oGZd/uTie9eX98eONOa0DlYiOAWwQoBIoEhAKu8BCU9FWVdi2BoLcAgBAAGHh8j7vnqd3Ft8ydO7e/o6Oj77XG+koYdwE+u/ZdlQFZ71W+AggwAUN1+D3kEJMQLyidRxpLWY09/9lobUIvFHAPFaC3kA2gcyGsUmexNUfed8JHL1u+4we37z70c3YxRwCOYvMx84aW0k+dS97FrksNMAa7Okpbl39q4U+B4hCggoULs6Vf/9DI3LMW+adXxU0qkaKhkWz5Qyd9oOeJg5+iH7TrocZa/mQp44lny7cs/9fq1ZWlnvpL3z5ejLsAW9LWJ3TKqURurGSu0mo42DrcyaVusbOj48+y/39avyoZgN/AygCCwFqFJpcJhO3+qQSfhznDqDEfdDGCTMlG1dNz6exkcqCnUBjX/oJlV2Wz+fvsn7hl+BL7wHEN3nHf/WTrssvOGuCachxrWTgeAvMoQRKSAQeYY4aQ/+NJH0tdtP17/AjVMVsncgRYcYOh/sTI3/9X3V2unRtIxenxtrbO/vGM/0iMqwCXr75cjLJ4D0djF4wcC+Ge9JaoIz1gz0kM8OCf188dl7UkihQdKP9r8k2BPZmQCgA+8YdVxyohFnOgAQLIspBfO3Cnt747cspmNeKo3vFHholuVjn+nISwZ1cWa/7vB/IfR4KACGPFxIDAOaAQiCDjYbRtMNa3Zn1u7rdXnDx79F7rvLIKKjEFgFzCL9eVPbhzd9gzf77Z1tLSsW+8Yz8S4yrACdtP4J4Td/ogArkCUToqFu7vfVqU0jARveBZ919n/dZf3rlyfTZufYAjBVPgHKfDAgsVAcCuEFdy0nGQDSBLbPjbvGeyP9y9Xs6W3dKWR25XOMqUXBTuCR+wN1slOMMEhM2bks+295l+zaB03vJ60062Z5jye7pjw9tb5fDIoDMCqDwgLFfyFQBBxA06u+zer94Sf3ZWfdBTLIbj3uv3YoyrANdddx0/vnrlGr/EfpP2BAqP964Nd/d3O/WJtpaWliMWzCqN/vdiLnyXmZUoVV2F9iiTK4w6xcy+fVc7OcMfUoEae5SMmFz2lpYHqFQPC8t9orm5eWg80/JnkFkLW54hhMEzzeXtH7m+5qdAlAZiPqA1oBjw5Tln5OxTLxjVpxznZy94c9BgS1oOnwHXwq8frtkw3G8GmubRrtbWvknr6Rz3MkBDceCGXZtThdy20TcW7+tskzVuNzO/aHZ3y5W371v6+QuXD2UG3uk93GesqkSx0DeYXnn7FR9CidOIXAhKOvCeTK8Pd/Z22nNSO1paWjrHOx2HYgSvg4fPwwbOfmNu0d+8nes+c+WgO7taz5cWz3OABZaDOggzB0AKAjYiIaBJwtVobinv+I/fVG6prxvuDUPdMZGxH86EjQqup7JTnLnl5caYPZ2dnT0vdXwVUX2ium6Btqn9qp+en3kgH+6ILNFIEoj6o97hL239ITjYEStN3r9nz578RKThIPwklUQ5q81xqVKFBlacgBSA4EDLJQPpAcpm8qJ/KGcNDgzLweObvDcvPNHMQ1bi6u/W/+y7t+Hx+Q20vqWlZf9Exn44E9YS2IfsFnRkifmlW/YAYJi5F0AvAFy8euX1psRt5FwAkg78jcPreTjTL+pTOyf64gMAncE5rLXWYRZWWcM2dux39hYDlXvz/PAUKUmQY7Bp/6wnV/xzzc2AVwTiIx9Z2df02bLR963fkMp+d03sOUi1p6Vl36RefGACBTjQnPqKs5v3/3bl6RlLflLlQ8ikBb/Z25u/Y+9Wq9rtDqKo7ehH+vLI+dYnWjZRxwOPz6r9/A+rnjr/rCHnvmv73iQIAkxYvKBwJpXKn3B27n3Ma7MAQPR3v0Fs/dIlp+bK3rPUz/HD9pthdKVhOdcwzyVBx5JBGYgV2bzT185tiaXeM+OZjik1MeRw/uUP70g9FrrPhK48FpEGaxGO/rD1f8JNbVu5Mrauo6OjbbJjJDrpREBZN1/bM3/V2cU1gsbaAPrTztBTu+21Z7+x0F1ZYRJQ1EBEpb7CbEugUkq4RFQCF2PDHwTGOokMxurAFqDzbPwgceM3fj/7U1/5/q7CuMQ/lQVYtnrl7/Ip93KdCyBTDvJrR+4d/d7m++w5iS1tbW2PjudAiechwnokUIJYMGrXCGNmkS1msTFNBJqlNI51LFQR0GRAc9lgrJVPMqiKAUeMDSTRGPv/QHtBpAjGACCGawOQOCACj/3MB/5WCRT3xTf8zY0XvXPNmjUjRzt1U25E0EHOW73yP3Vp7HKd8SFLbAS7/V3Zn+96RNS4vWEYbj/aF7/tIXIb2Pqt7aJO+Qd6/giCjVUKQgVlkHQEyqhUAO6BCysYVkRjwxWywMFuKzF2zfUD91ds2NJsWiAsUfQ48kKoUJHOFCkMIqEIxI6tRWWSYzGHnVTCxGpKTUl1qSpNJTjp2HAtCxhIO3LXri3nl5UteCCTOXL1+dUyJQU459ZVn1cp51M660MkJKJ+PTh6457bSISDViy+uaO546jfCU3nI4zW4v5I03fsBozdqQeLLBEBPlDIkinmkM0V7OxQDiMDI2Kke8QZ2bI/1nXVX6XPPmWRWqyKBGExhAW5sIHnrPyPBTd56fwuQEtAakAbgAxg1NjvdOBLlAUIC5ASgANwHOAYYCyARWOjDquqEAdwVAWYco+AM1ev/DeZcq4LCxGEI2CKpjD645afeU9173ZqE0+2trZufsVDvF4B1/591dLzT/c/Xhozx/mB1D1D9vD+fgx0Drjp/T12unNAZjsGnFw2ywUoUQBkDtDh4O/bflpdzU0mYhR8UUg6nBRlBv3d7rOr/q3h8ke27W17Od9PRHTuueeK1tZWK4rKZSJRkMxMsVhM796923u5taiXy5QS4OzfrrzWxJ0vqGIE4RBMIP3cr9t/mb9/73bZkNyOCI+1t7cfeXzYUYRocR2QPwGEajAZgHyA83CVF49xIZGCF6eoqLX2e3vPHB298+5lpRXmXoQkyBa45sa5P714cfeit50dvhUA+rrFxg/eUHHZfRv7Jq618mUyNQT4AtHyk9/9k1zS/TuVCyFiAsZDMXtr783eXbu3U318dzab3TgyMjIuJeEjQTTPSc1FolQpKi0tDePxeLB58+YjdtmaB+37RZIuhDHo6Iz3vuHD8745uzTfvPXHvdeVVfGJEEBfN2344A0Vl081CSZdgA/dfGXNbtfcZOL2iigXQCZtqHQ0nP1ly63F9R17rNmpvUKIR1+s72CyCdbJd7pJ+Xv2GBSXuO6mxlu++DP1IMLqOx75/o6a0xdFG1yHyuACAz302LfvWbzqqz96/CVbQieKSRXg0lsvP3XItn+JmHW8KoaQSRtha3F/9sbm24LdfR12fcnutG0/OToJrX0vh/47qKa6zHpKSpqHmMGWbZU7z/j4rF9UV+afg1Lruru7/V2/jL1n0UJzC4cApRijw8nn1j/b+Nfv+sz25yY7fmASBVj2u1X/kBfim2yJBJjBio2/efSRzI2713EYDojKxLbI97d0d3f7kxLgS7GWSrVt/VHG6EwYg9ERO/P2Lzb9+Nn9xd2N5bRuT1tb+8FDu37nfmNOE1+jRwFZwvDyor8/XfKJppVDt0xmEoBJEOAdq1c1DVv0n+xa79aGQYIQ9fld+Tt7/ujd07qDquwBKrGead/Xvm9iGnpeOcUHqN51rdtknM5EZOAH8eBj36v7xU/uUtsWNppNzc0dTx1aUyE6T6bvfOLeijpcqEYBKw5AEApF9zcDw85X5l8xtHey0jJxAjx0nlySrv2nAPiiKItVmUhDjUSZ4JnhR/Or25/UQ7l+UZtoFUJsaWlpGZiYoF450Tr7NOngVyJOx4INsqMy+/mfNq353u/w3LyGYGcQBBt6e3u9w9930+crZ1+xNPdkPEVzosJYbV+UAFGOc5qtH+fDih9Xr+iZcBEmRIAlt1+xSgFfoMr4STrQiPqLw+Ge4jP5u7qeiXb0d4sqp59TcgdF1DwR1bxXi37YvloQbqAKOCgAO5qTuz/x/ap71j6NtgX1ai9L+dhfKqxuucm98MT5fL9FgDowy8ByACSAKEseBO5mpjW+rlxbuqxnQtZDGDcBLrj5yho/pt/HJP6BSt1jw2Ff62F/S/hcZmdhXc/+YH9mwCqz0lZprJmZ97W2tmbHJZDXyheI+EJxKaS4jmbRm9APtPTau29eH3vqq7+q3qlJD8+pDncmEuGW7dtfemRP263xTzY16W8CABcBw2N9P8ICkADAgCnSEAmzETY9CIs30qnRuE0hGxcBzv/DytN9Y/2HjkydzoT7gn25ncFjg/3e5qEC/CgQNfERK2G1G2M62traXjA9bMrwELkK4mvkWn+VyaL/mb3WrjUPlwz8el1ZulgwuYbasC+RwK59+zpe0fTtR75X8pHjmsLPVCa5ybbw/MIQBggjgJkgBJALEYxm5eM/+kPdh2+4eU4r8yNHvUw0LgKc/qv3lQS7RktGvvZMWQh/loRIyApXWyk77SvVJ6Uc6uzsfMFUq6nG6tUkliYxa9lnj4lv3+7UA2EFbBZ1tXrElaZLa933atMxa9bcU95zgX9hyuW5msliZooUmdGCDAYzopjJC29g1Mp0DVuDFYlwIB63to7HuMdxewQQkayvr693HEdEUZQrLS3NHz4N7PUCUUPF3LlWOYBiGIbZIxXyXt3nnlMODNQCMgmY52dJWVrDNmEibumKeFElhSj4RMPjUT6a9JbAGSaXKbdM3AwTy4wA05wZAaY5MwJMc2YEmObMCDDNmRFgmjMlRwW/Xhi68MxLE7bVmNfJjTV//OO2P73w5fNk+gn/Alc4wid3W9Xd66bMCKDDmckBXgMM8/WEpO/HOPtM17Lzv3H1vHucAy9YxuDnScK9MirsGF1x9q+aL1z6lkkO94i8rgRY+fXCB1Z8x6xZfkNwzbLP7qqc7HhIoCsIFQxra44bXfPRY771v4vrL43jK48ERvB3tTEAc3m54PdVIXr0ofPeu/zQ9w9ffMai4sVLTp2s+IHXkQCf+fpIYwHWN0mIldJ1v4GKBZuXfKHtskkL6NLFcaP5+JAZ4diSxpCm8I50onkJEZFjmz/mtIYGYzhUsKVx13mtF1JFRePBjzDKrImT3pRefu7t95+3vGkykvG6EGDlN3LnbBXJh7TlVoeZPMJ8EZbrzkvUNt127jWb3jcZMaV9+53llt3oG4OUIAxp5G8YDlYP+YVGJOorysor2iPmEQlCUhK2+dT8rYG+gbpUamyjqL9ZUiZA9XmlUGHpd50Sy27YuGzFkolOx5QW4Kov98Qv+bp/bQ7ug5qchTr0YcVTkG4CwUjfaL7tqZ0jz9745tmzq4+d0MAuv1xo5s8pZrgEeCzDzw6GN9842Le5zqZ2FHvztDDugZCXRLBIYIfPrV6gBn2lOgFgqNf7cqm0Kn1jMBgqzLLFnPmUvf3SU089biKTMmVrAZfcELxLJ2Zdy659kgkBIQEorYs9z+zJ7btzS37Pb/cXencM2PFUPpGqTRIRjeeUsUMZyHZ9tNq2TkpHCqXSwk9GzH0/7x14bkHc2S9d9zFmDnFeowunTomxbQXQovUAVNQ/MtTXMXrRGR8vEfITGaVgEVAqJToCPXJnzt+0ZSh/Vl3dgnRfX8vgRKRlygnw7m/5S72IPqNt9yJmgAMDE+aKhfanto0++5OncztXt0YaQ1ayvD9e1dAFOANRFGUm6uKn33XqHFvIa/PaoMISeLRIO6/pHnx0dox7FPMTzQfnMNSmDI1ACQBFw2jzikPIZDv6LzzjsxVSfK2gDVJSwDNQa3LRo18ZyGzcnc/3znbdTDIpJ6yPfsoIcNk3cucFxr7G2LFLOAaoYhFCOvAHt23vueP9vy207Ryw4pS1Sxs7tHJaS8rsgckYYKIK4n+qLFmRVwodyhr5/GDuHpe9oSTsZ/a2tz+/JvHxKxWeuC+QBBSM8HpMYmTDWcd8sUKKK3xjUCYF9oa652uD3p2/HM7sKrMwuNC2dxkh9jc3N0/YLKhJF+A9N6gLcmw+zU7JChEHVCYCe7kAMu4aHcEpXzC/9sLvnN/3wOeuDfJdW9o6O0cn6m4/nKHlp320yrL/aiRSKLUEHslEWzam0/vmxuwd+46wWgkDZJgAKP5OLX/wOCc+j5khIHBn3jz2Tz3pB7r9Yl+Ta+0nsrbub5mYbP9QJmVE0OrVEDe1F96vKPZx6cpTVAiE+b7uaGjX/pEdt2wrL6kpSb31Cx/UWoOEgFPiIrP/0ese++9zvny0p0e/XAbeftrJsUg8TqA4g6GZ4bP0rx3CF37U/sQPeYRfMHF1YNlpW5NSvsnXBklBcIRAV2SGv5327v7WQHZrpTSDZZa1RWu95+Bwr/9ZvNj6yItMQh0PJiUH6OtjC1oj9DpuyW9dt9rr3BBlWx7y1VCn5wdIV552KUH7l5GMl7GOoDyG3/VoU6WFU4jo2YmWYPji00ssJW5JSBnPao200sNlUlTV24itLLEu+JFXfzOAPxOg59K3NCaErFLMkAQwCTxY0M98si/7x+3FfPdcS7YzY3NLS0vvwfeMXPqWxvfVxB5oW/7OzzTd/4ffT0TaJkWAq6+m8GqU3kRUVlYNLLDLkRRulR+rmz9aGG7tr288xc+R6GJpl4EZyh8J8u1r+2KlVHbuCedM/B7CCjdV2tbx2hjcmQ3ufzIK266vLrkqNIykDN8g6uInUUPDMB+Yxzi8/Ix3p8j6bwFqCNlAg7zvDAZ3fKl/eFNKmOEmx37O9/0dhw8u1ZG1pMK1j3si2/9X8+NVT8JP9433425SywCnnHJKwfO853bv3q2Zh/7srn7H9YVBjwASEib0fJXvy7Bwhx955OiPjf9LDCw748c1MfuyUAG3ZfUDH2zpv+MT88pmj60FxXDITgiTqNTdzb5/ybnzwyj8apVt/TUYGAojxAShPeLc9cMjT1fYprlCOk83NzcfefcSw0thNHKReyxKk4vm1qSG8WIbJh0lJlWAF1twAQAicF4QYEiATRjpsOgJlhO2QAQADK447YaaRPzDGT/K/WQ0+v2nu9LPQqDzjBL3+cIaS3V23JnVuezUmyqE9R5XSHevp7avL0bbL0iIFaXSqrTA7nzbNvuzha3pgc4X3bqGDc6CMYiTLgMhEQSBhf+fBfhLGENFEA7sIaw1vFGve7hwxOljy/+zL+HI8lql1AJtxPHEqDPMMbLskCDb/dGuOx756rxXtBPH8EVn/G2KrH9u9aKHPt2bW3vbcCbTaFNfZ2/xobefGzuZcwQDAwlpxYSIt/r+U9uM2nhbQYtfDOZ8xYHac/zsswGurJAytShWWbKzed+Lbl0zvPzMj8WleKOvNGotWVMRS6b6RzLyFZ62V8yUFQAYE4AAMIyxS2c7Zy79/Bvedn3uOCmseUarBQT5BgDzmEvm+2SqhZ2KSxcAjS23Bxrzxymrv3bJ5/b+48NfO/b2l/vt0sVDvxvyz3x/R7rGMdGsha7TpoAtzJlcdsVpFQ5ZYAYYGhsLwdCS3c/dgVilQFV8bpWAGVbclrLE+4jkvJQw8nNVzqqlp566ue288+5vWrIkHNq6LmkbOUsF/ptBdIVD4srQMCIw6iRq31FatuCmwd32eJ3dg0z6xJBVa2Cjk1N5k6/zfKqJx2RdFJn5AvR/WFonGK3AOoxgtCfseELGEpZ0ADqwmCIzwPrARtOHLUZ78HfpADoEcs13Xvr4Dy696+XGRkSx2oaGhTHLyrW3t3cfnP83vOL0j5WR9Z3IKOwM3a6L2tLXmaD37pHekZ5DC23DF5/2t1XC+dlQECEpCXkDMHMrERXApgqgihJLxiQRspGCAeASodRx8N+D+pf/vGv7lzmXazla5/pIjGsOsPw/+xLVlIynFdX6EWa5jqxVkWkiSdXGmIWCRBWYG0BUBbIq3GQcZAOxEiDMATrIgYggrJgNIlsHeaX90ZxRxSJHoW+0r2D8gMOCzxxFMIbHthoRIGHbwilJkJVIkOXaZFnC692yoqbkvdsHcrn2l4odAJjZB7DjBYOGRB4AAAfmSURBVH83fCIkQExQIlK+VNoNyBxeYq+6d9PPOy847aJG13mPMgalgiFJzAcADQHDDGaGYUa5JREBSCudv2/E3/bjtNdaW14+h4hax7MmMC4CrLg+/z/sJJeqIJUcIEowuMyJpQRJwImP3b10oDJnFGAiQHlZhJls0UT5jPZHc3aqvlbGq8pI2gizHf2DD37qN2FuMGuinA9v2FfeYFGrIILhyIRQMAiNxvOFSgkICctyyZWxilgUeJZ0Ypyoqqo9sBnzqz6pLLBAGwYRIYxUWAwDVQhTHt67pGpwwLvVEiIuiLQg2tRB9N/PjBY219niilIpZltASgKSmFgT68BQMWdMoTsy/dtC1fHHXND6VL7YV2NhKGHZva/LaiCxvpG9zBK3tLyB+UD2rAEVBtD5fMBBblQX+0eifM+QynQOhJm2kSjTOqLyPdko05HzOvsGjv/kpo85ZbPPZAMY5YWZPbftR4QdlmX3aXK0ZZeHSNqhZYXa94V2HEe7rqsHBgb+dMJqmMkPtSVt3zKJuAUkyXXd3Gs+qYbyUhKYGZ6xfFYmSoGAXK4IskoqbOt0X2nEBM59I8mPfoNLLrl+0/Z7a2vK31hrWbNixHEwyYDYDEUI+iNVVEYXAS4mbJmb51iDjuN07du3b9wXiRgXAe79bNnTx82Nn1/21uv/Hk7qTawCW3vpQpjrzkXp3elwpGU0Gu3IGB85rVFgGwUJeE7cKgonXswDQ07p3FV/2jmWScpYlQIX9rYPe71/8csnAJJ8jyXoXTCEUcg8DIWlpYpw52bPf/vpn84p9UigDUIDjBrbPJ0rnoCk3dqfydzVLyuSsL0YpLQdADEA1a4TMqTv27aX2bvXa5vAtZHGrQywp8PrJaL/KgOaYhJVkJAEKJG0QrKSBVHSmHcqrIJt254QIji8Z++i/ygeaQr2lJjKHDbqX/W2hH9fajmLN3lRuxCRKi0tCwHAL8cWr1/3x4SojRHQGeiOtZkRbVuWHQ4OFnBYk/FkM66FQGYuANhx3nnnyXw+T88++6zhIHpZ7fjMTEdo8534ZuAjMPvHm733nnTSCkXFdz6cDSrjUg7v2jW2nv8xv34qN7Ts9E6bRK0kxoCKpRGZoYuqKoujS04u41SiLAz07JhllQZKLSCiGiJUgFHLzAkGiEBwLBqUsDbv1fHbFz/wwLjlepNeDXwxln+tcDPFk1eyBryh3T3tvzrnK/AKd3ZMgUfAQYhIlDQ1veGqEjv88rzKoqfEbNK6gg1/Py7EoogZw4bToTGD1ZJsYpQRUTIuRSwmBCTR80r/2WU42IgBZBX1d6iGD5247taXXX19JUzhhqDJoW/5SYk6p8zpGB1buihWWuUKE5UJDqsslmU+80IB1ABoHLrg9HohUMmG50SeKU1KpBKWhUykUDQGDKDRokpXupVgRsCMwDCy2mBE6cgwdMTQDFYHs0UBkjbBkgQrIYRV6cjauOr82WmLTj7/6d3bdh7tWsGMAIdhU+JvQ6W/VRKLhwoIERYtJsRtknZcCpQKOrDrM8ZamoxBThuMKmMGQz2aNzpTa6EmLijuEmFrhL13DWU3KQNd1FGYZwQjhos5g6CgVBQwKcWszNhmMbAEyGWWVY4Va7RlWQKU6FMm6veDxQsWLOgHcFTXCZoR4DB0EP/fdlGoiwu6epYlKyXGroxixkCoVNYgnVZ6tE/roX7F6fZIpXsilemMzGhXqHL7QzO67dhZ1xxjyWNsIjwX6dbr2obvgUQ/mIogGEipIHQELSNbSA0RGSIyYSAYghmGCBwKsJEQygXsxPyUq4wxR71jaEaAw6hZv75QA3zhLcctePCChPs2h0VtxGyFzGZPZNI7QzXc7Uejypg8NBVgoQhWnsXSUxAFUJSvFOJDAI3t/2SMhEWZ+Un3qam44vmMAC/C5r2tD29GYjvKSmoRQxJGCNhEVZbl1QnO2q6TB+BprYOOjj4VHTJKaXj56cHBwp0AAVJEWuspuSzejAAvwoFhZ0N4Fc9c5uerqwd/MMZMiSrs4UzpmUGvW+j5Sl3EZmrWsw8wI8A4wIKDg3uBhVGkEKkpK8GUFYDo0KaRKZl7vjhEf4pdEzQILISYkhJMWQG0YP9gWzBBGeJoSp7AI0EGIRFgQAgRUyAzKXMZXg5TVoAYxFjfPmFsUKj29dh66q8DGD4RYJjgm5IQUKaqqmpKSjBlBZgFDhgYE0CFAfuhsspoSm4hczhsUBQgaBhkRcaHdnQqlZqSOdiUFcBjKgBjI4d0kMmbCKFl2a8LAQQhKwgIDGPQD/KwoTds2DCTA7wSchYNHSz66UJPGgZBFMVeF8vNs4VRAuAZEbYrK2tJDidrQutLMWUFcLUZAgCjDLyBbd0s4IdhOGX3EzoUZvRDCowYjD7necMVsKZkKyAwhQWodLnVSQBhvs8r7L+n3S4pK/T09LwuBJCSnw4ik9nk6W39vpeJCTHl+gAOMmWbgo9XyU0dfYPXZ7f/vDJMd46IRP0g8+iUfI4eTuXdmx7/1xOOPXONx2+dG0dWsJyQHcBeDVN2RNBB6mw6PTn32BRztGkq9qb9JSoW1DeWKFt1dnaO+yzfV8uUF2DRokU2ALxe9xua6kx5AWYYX6ZsIXCGiWFGgGnOjADTnBkBpjkzAkxzZgSY5swIMM2ZEWCaMyPANGdGgGnOjADTnBkBpjkzAkxzZgSY5vw/wXmvPnHPi90AAAAASUVORK5CYII=)
        }
		ul{
			width: 200px;
			height: 200px;
			/*border: 1px solid #000;*/
			margin: 100px auto;
			position: relative;
			transform-style: preserve-3d;
			/*立体相册起始位置*/
			transform: rotateX(-27deg) rotateY(-55deg);
			/*10s 整个动画时长*/
			animation: willRote 10s ease-in-out infinite alternate;
		}
		@keyframes willRote {
			/*n% 动画进度,单个动作时间与animation的动画时长有关*/
			0% {
				transform: rotateX(117deg) rotateY(145deg) rotateZ(90deg);
			}
           10% {
				transform: rotateX(207deg) rotateY(235deg) rotateZ(180deg);
			}
            20% {
				transform: rotateX(297deg) rotateY(325deg) rotateZ(270deg);
			}
            30% {
				transform: rotateX(207deg) rotateY(235deg) rotateZ(360deg);
			}
            40% {
				transform: rotateX(117deg) rotateY(145deg) rotateZ(270deg);
			}
            50% {
				transform: rotateX(-27deg) rotateY(-55deg) rotateZ(180deg);
			}
            60% {
				transform: rotateX(117deg) rotateY(145deg) rotateZ(90deg);
			}
            70% {
				transform: rotateX(207deg) rotateY(235deg) rotateZ(0deg);
			}
            80% {
				transform: rotateX(297deg) rotateY(325deg) rotateZ(90deg);
			}
            90% {
				transform: rotateX(207deg) rotateY(235deg) rotateZ(180deg);
			}
            100% {
				transform: rotateX(117deg) rotateY(145deg) rotateZ(270deg);
			}
		}
		ul li{
			list-style: none;
			width: 200px;
			height: 200px;
			text-align: center;
			line-height: 200px;
			font-size: 40px;
			position: absolute;
		}
		ul li:nth-child(1){
			background-color: rgba(0,0,255,0.7);
			transform: rotateX(90deg) translateZ(100PX);
		}
		ul li:nth-child(2){
			background-color: rgba(255,69,0,0.7);
			transform: rotateX(180deg) translateZ(100PX);
		}
		ul li:nth-child(3){
			background-color:rgba(11,23,70,0,7);
			transform: rotateX(270deg) translateZ(100PX);
		}
		ul li:nth-child(4){
			background-color:rgba(255,255,0,0.7);
			transform: rotateX(360deg) translateZ(100PX);
		}
		ul li:nth-child(5){
			background-color: rgba(255,192,203,0.7);
			transform: rotateY(90deg) translateZ(100PX);
		}
		ul li:nth-child(6){
			background-color:rgba(218,112,214,0.7);
			transform: rotateY(90deg) translateZ(-100PX);
		}

         
	</style>
</head>
<body>
	<ul>
		<li><img alt=""/></li>
		<li><img alt=""/></li>
		<li><img alt=""/></li>
		<li><img alt=""/></li>
		<li><img alt=""/></li>
		<li><img alt=""/></li>
	</ul>
</body>
</html>

效果

 

  • 5
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 3
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值