1、主要用到的属性transform，position
1、transform:translate(X/Y/Z)() ： 向X、Y、Z轴方向做平移
2、transform:rotate(X/Y/Z)() ： 向X、Y、Z轴方向做旋转
3、transform-origin: （） ： 设置旋转轴
4、transform-style:preserve-3d ： 支持3D效果
3、position：relative ：相对定位
5、position：absolute： 绝对定位
6、perspective: 视距
2、搭建主要框架
首先搭建一个正方体需要6个面那么我们可以先用相对定位和觉得定位将所有图片放到同一位置。例如图中的A位置，然后将相应的图根据 绝对定位 移到相应的位置然后根据 对应的旋转轴 旋转到对应位置。比如B图需要向左移动图片A宽度的像素假设为200px那么就需要 left:-200px 的定义然后定义他的旋转轴为BA相交的线也就是右边 即 transform-origin: right 然后沿着Y轴旋转90° 即 transform:rotateY(90deg)其他图片也做对应的处理
3、实现旋转
使用@keyframes来设置动画效果form为开始to为结尾，也可以用百分比来设置
@keyframes myAnnimation{form{}to{}
4、代码
这里可以利用伪类让鼠标移动到相册上图片就加一些平移效果让相册的视觉冲击更强烈
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style type="text/css">body{perspective: 800px;}@keyframes myAnimation {from{transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);}to{transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg);}}.container{width: 400px;height: 400px;margin: 1000px auto;position: relative;transform-style: preserve-3d;animation: myAnimation 10s infinite linear;}.container > div{width: 400px;height: 400px;position: absolute;}.container > div > img {float: left;width: 200px;height: 200px;}.container > div:nth-child(2){left: -400px;transform-origin: right;transform: rotateY(90deg);}.container:hover > div:nth-child(2){transform: translateX(-100px)rotateY(90deg);}.container:hover > div:nth-child(2)>img:nth-child(1){transform: translateX(-50px) translateY(-50px);}.container:hover > div:nth-child(2)>img:nth-child(2){transform: translateX(50px) translateY(-50px);}.container:hover > div:nth-child(2)>img:nth-child(3){transform: translateX(-50px) translateY(50px);}.container:hover > div:nth-child(2)>img:nth-child(4){transform: translateX(50px) translateY(50px);}.container > div:nth-child(3){left : 400px;transform-origin: left;transform: rotateY(-90deg);}.container:hover > div:nth-child(3)>img:nth-child(1){transform: translateX(-50px) translateY(-50px);}.container:hover > div:nth-child(3)>img:nth-child(2){transform: translateX(50px) translateY(-50px);}.container:hover > div:nth-child(3)>img:nth-child(3){transform: translateX(-50px) translateY(50px);}.container:hover > div:nth-child(3)>img:nth-child(4){transform: translateX(50px) translateY(50px);}.container:hover > div:nth-child(3){transform:translateX(100px) rotateY(-90deg);}.container > div:nth-child(4){top: -400px;transform-origin: bottom;transform: rotateX(-90deg);}.container:hover > div:nth-child(4)>img:nth-child(1){transform: translateX(-50px) translateY(-50px);}.container:hover > div:nth-child(4)>img:nth-child(2){transform: translateX(50px) translateY(-50px);}.container:hover > div:nth-child(4)>img:nth-child(3){transform: translateX(-50px) translateY(50px);}.container:hover > div:nth-child(4)>img:nth-child(4){transform: translateX(50px) translateY(50px);}.container:hover > div:nth-child(4){transform: translateY(-100px) rotateX(-90deg);}.container > div:nth-child(5){bottom : -400px;transform-origin: top;transform: rotateX(90deg);}.container:hover > div:nth-child(5)>img:nth-child(1){transform: translateX(-50px) translateY(-50px);}.container:hover > div:nth-child(5)>img:nth-child(2){transform: translateX(50px) translateY(-50px);}.container:hover > div:nth-child(5)>img:nth-child(3){transform: translateX(-50px) translateY(50px);}.container:hover > div:nth-child(5)>img:nth-child(4){transform: translateX(50px) translateY(50px);}.container:hover > div:nth-child(5){transform: translateY(100px) rotateX(90deg);}.container:hover > div:last-child{transform: translateZ(500px);}.container:hover > div:nth-child(6)>img:nth-child(1){transform: translateX(-50px) translateY(-50px);}.container:hover > div:nth-child(6)>img:nth-child(2){transform: translateX(50px) translateY(-50px);}.container:hover > div:nth-child(6)>img:nth-child(3){transform: translateX(-50px) translateY(50px);}.container:hover > div:nth-child(6)>img:nth-child(4){transform: translateX(50px) translateY(50px);}.container:hover > div:first-child{transform: translateZ(-100px);}.container:hover > div:nth-child(1)>img:nth-child(1){transform: translateX(-50px) translateY(-50px);}.container:hover > div:nth-child(1)>img:nth-child(2){transform: translateX(50px) translateY(-50px);}.container:hover > div:nth-child(1)>img:nth-child(3){transform: translateX(-50px) translateY(50px);}.container:hover > div:nth-child(1)>img:nth-child(4){transform: translateX(50px) translateY(50px);}.container > div:nth-child(6){transform: translateZ(400px);}</style></head><body><div class="container"><div><img src="https://tse2-mm./th/id/OIP-C.s5alQa1zC-YRd_6hOj1I6AHaGI?w=198&h=180&c=7&r=0&o=5&dpr=1.1&pid=1.7"><img src="https://tse4-mm./th/id/OIP-C.0BPElpPEJvBN9aQ8w73EDAHaEo?w=264&h=180&c=7&r=0&o=5&dpr=1.1&pid=1.7"><img src="https://tse3-mm./th/id/OIP-C.SQ3NWEFNBscPLbU7Jg8GYwHaEK?w=293&h=180&c=7&r=0&o=5&dpr=1.1&pid=1.7"><img src="https://tse3-mm./th/id/OIP-C.Zr5uPHLVSNguKkmIQfos_wAAAA?w=165&h=180&c=7&r=0&o=5&dpr=1.1&pid=1.7"></div><div><img src="https://tse1-mm./th/id/OIP-C.drgMM3Em68m3kcDNw-tjWQAAAA?w=165&h=180&c=7&r=0&o=5&dpr=1.1&pid=1.7"><img src="https://tse4-mm./th/id/OIP-C.dRAbgTM8_cqW-iRt9LCEBAHaGH?w=200&h=180&c=7&r=0&o=5&dpr=1.1&pid=1.7"><img src="https://tse4-mm./th/id/OIP-C.b_OQVqDrnGYibO3ts5CLBAAAAA?w=137&h=150&c=7&r=0&o=5&dpr=1.1&pid=1.7"><img src="https://tse4-mm./th/id/OIP-C.xEv7aAiKIk0onZLcCCRT2wHaFE?w=242&h=180&c=7&r=0&o=5&dpr=1.1&pid=1.7"></div><div><img src="https://tse1-mm./th/id/OIP-C.RtG_5vDB1tuDvpQhHbZ7iwHaEo?w=264&h=180&c=7&r=0&o=5&dpr=1.1&pid=1.7"><img src="https://tse1-mm./th/id/OIP-C.0V1jtIQ1N-6JODOzUFXjnQHaEo?w=256&h=180&c=7&r=0&o=5&dpr=1.1&pid=1.7"><img src="https://tse4-mm./th/id/OIP-C.HwcUxD_avhYsWdGrqK5kegAAAA?w=155&h=180&c=7&r=0&o=5&dpr=1.1&pid=1.7"><img src="https://tse2-mm./th/id/OIP-C.bxvvwr1QG_I987xHgtGfQgHaEK?w=280&h=180&c=7&r=0&o=5&dpr=1.1&pid=1.7"></div><div><img src="https://tse2-mm./th/id/OIP-C.bxvvwr1QG_I987xHgtGfQgHaEK?w=280&h=180&c=7&r=0&o=5&dpr=1.1&pid=1.7"><img src="https://tse1-mm./th/id/OIP-C.0V1jtIQ1N-6JODOzUFXjnQHaEo?w=256&h=180&c=7&r=0&o=5&dpr=1.1&pid=1.7"><img src="https://tse3-mm./th/id/OIP-C.5m2QUQNO4M3vA7rIId2v-wHaE8?w=246&h=180&c=7&r=0&o=5&dpr=1.1&pid=1.7"><img src="https://tse1-mm./th/id/OIP-C.hRU2VTq-nxInfpT-s-6PVQHaE8?w=246&h=180&c=7&r=0&o=5&dpr=1.1&pid=1.7"></div><div><img src="https://tse2-mm./th/id/OIP-C.3CLkNg7Tu9fUO7MIa_R6IwHaEo?w=247&h=180&c=7&r=0&o=5&dpr=1.1&pid=1.7"><img src="https://tse3-mm./th/id/OIP-C.TRhFqkkVRgSoM0SUeDnRWwAAAA?w=257&h=180&c=7&r=0&o=5&dpr=1.1&pid=1.7"><img src="https://tse4-mm./th/id/OIP-C.9SD4AMFTIP4z9hhZLr6k_AAAAA?w=226&h=180&c=7&r=0&o=5&dpr=1.1&pid=1.7"><img src="https://tse3-mm./th/id/OIP-C.00QhpPLlFsVD-nVDv8qBKwAAAA?w=177&h=180&c=7&r=0&o=5&dpr=1.1&pid=1.7"></div><div><img src="https://tse2-mm./th/id/OIP-C.lBPfaEXMhbdNizwzO154jQHaE8?w=250&h=180&c=7&r=0&o=5&dpr=1.1&pid=1.7"><img src="https://tse1-mm./th/id/OIP-C.2nWl4S4HgdO1flOWVS8ksAHaEo?w=270&h=180&c=7&r=0&o=5&dpr=1.1&pid=1.7"><img src="https://tse1-mm./th/id/OIP-C.5J1TtPKNxy9toKNmID9PDgHaEK?w=317&h=180&c=7&r=0&o=5&dpr=1.1&pid=1.7"><img src="https://tse3-mm./th/id/OIP-C.dAAyBtUSZzzNDnlUIW8A0AHaHa?w=178&h=180&c=7&r=0&o=5&dpr=1.1&pid=1.7"></div></div></body></html>
5、效果展示
web旋转相册
