使用html+css+js实现3D相册
使用html+css+js实现3D相册,快来上传的照片吧
效果图:
代码如下,复制即可用:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> html, body { margin: 0; padding: 0; background-color: #29454d; /*禁止文字被选中*/ -moz-user-select: none; /*火狐*/ -webkit-user-select: none; /*webkit浏览器*/ -ms-user-select: none; /*IE10*/ -khtml-user-select: none; /*早期浏览器*/ user-select: none; overflow: hidden; } .box { position: relative; height: 500px; width: 500px; margin: 100px auto; transform-style: preserve-3d; perspective: 2000px; } .di { position: absolute; left: 50%; top: 50%; height: 200px; width: 200px; transform: translate(-50%, -50%) rotatex(90deg); transform-style: preserve-3d; } .z { position: relative; height: 200px; width: 200px; border-radius: 50%; transform-style: preserve-3d; /*transform: rotatez(1deg);