用动画效果制作旋转相册

需要了解的知识点:

动画 animation

景深 perspective

基点transform-origin

架构

 

 让整个架构在网页的中间并设置宽高

给每个div设置一个基线 (设置-600是为了接下来让照片始终绕着中间的轴旋转)

给盒子设置宽高和定位 

 接下来就是给每一个盒子设置位置 让他朝z轴位移600px(为了让他一直围绕中间的基点旋转,跟上面的-600抵消)第一个照片不需要绕y轴旋转 每一个相隔30度以此类推

 然后再添加动画效果

 

 添加景深的时候一定要给父级元素添加,不然效果会相反,近小远大的效果

 

 

猜你喜欢

转载自blog.csdn.net/Cat_LIKE_Mouse/article/details/119333671