3D立体旋转相册

3D立体旋转相册
.
├── 3D立体旋转相册
│   └── index.html
└── 找例子网_3D立体旋转相册.zip

1 directory, 2 files

     /* 让ol里边六个面的图片旋转到不同的位置组成立方体 */         ol li:nth-child(1){opacity: .5;left: 0;top: 0;transform: translateZ(50px); }        ol li:nth-child(2){opacity: .5;left: 50px;top: 0;transform: rotateY(-90deg); }        ol li:nth-child(3){opacity: .5;left: -50px;top: 0;transform:  rotateY(90deg); }        ol li:nth-child(4){opacity: .5;left: 0;top: 50px;transform: rotateX(-90deg); }        ol li:nth-child(5){opacity: .5;left: 0;top: -50px;transform: rotateX(90deg); }        ol li:nth-child(6){opacity: .5;left: 0;top: 0;transform: translateZ(-50px) rotateY(180deg); }         /*外层盒子鼠标移入效果 */          .wrap:hover ul li:nth-child(1){opacity: .5;left: 0;top: 0;transform: translateZ(200px); }         .wrap:hover ul li:nth-child(2){opacity: .5;left: 200px;top: 0;transform: rotateY(-90deg); }         .wrap:hover ul li:nth-child(3){opacity: .5;left: -200px;top: 0;transform:  rotateY(90deg); }         .wrap:hover ul li:nth-child(4){opacity: .5;left: 0;top: 200px;transform: rotateX(-90deg); }         .wrap:hover  ul li:nth-child(5){opacity: .5;left: 0;top: -200px;transform: rotateX(90deg); }         .wrap:hover ul li:nth-child(6){opacity: .5;left: 0;top: 0;transform: translateZ(-200px) rotateY(180deg); }