3D旋转相册html+css代码分享
首先看效果：
html代码：
<!Doctype html><html lang="en"><head><meta charset="UTF-8"><title>3d旋转相册</title><link rel="stylesheet" href="demo.css"></head><body><!--准备一个包裹器--><div id="wrap"><!--将立方体包裹在其中--><span id="in-front"><img src="img/1.jpg"></span><span id="in-left"><img src="img/2.jpg"></span><span id="in-right"><img src="img/3.jpg"></span><span id="in-back"><img src="img/4.jpg"></span><span id="in-top"><img src="img/5.jpg"></span><span id="in-bottom"><img src="img/6.jpg"></span><!--第三步组装外部的立方体--><div id="out-front"><img src="img/7.jpg"></div><div id="out-left"><img src="img/8.jpg"></div><div id="out-right"><img src="img/9.jpg"></div><div id="out-back"><img src="img/10.jpg"></div><div id="out-top"><img src="img/11.jpg"></div><div id="out-bottom"><img src="img/12.jpg"></div></div></body></html>
CSS代码：
body{background: url("img/13.jpg") no-repeat center center fixed;-webkit-background-size: cover;-o-background-size: cover;background-size: cover;}#wrap span{display: block;width:100px;height:100px;background-color: rgb(10, 118, 212);position: absolute;top:50px;left:50px;}#wrap{width: 100px;height:100px;margin:300px auto;animation: rotate 20s infinite;transform-style:preserve-3d ;}#wrap span img{width:100px;height: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);}@keyframes rotate{from{transform: rotateX(0deg) rotateY(0deg);}to{transform: rotateX(360deg) rotateY(360deg);}}#wrap div{width:200px;height:200px;background-color: brown;position: absolute;}#wrap div img{width:200px;height:200px;}#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);}#wrap:hover #out-front{transform: translateZ(150px);}#wrap:hover #out-left{transform: rotateY(90deg) translateZ(150px);}#wrap:hover #out-right{transform: rotateY(-90deg) translateZ(150px);}#wrap:hover #out-back{transform: translateZ(-150px);}#wrap:hover #out-top{transform: rotateX(90deg) translateZ(150px);}#wrap:hover #out-bottom{transform: rotateX(-90deg) translateZ(150px);}
代码直接粘贴复制即可，图片可以自行选取，昨天是我一个好朋友的生日，本来想给她敲一个比较好看的特效的，但是无奈前端水平不够短时间内根本敲不出来，书到用时方恨少啊……从今天开始再学习前端吧！加油
