H5C3综合案例

H5C3综合案例_第1张图片

 

 案例:实现步骤

1. 搭建HTML结构

 

 

里面的6个div 分别是 6个狗狗图片
注意最终旋转是section标签 旋转

2. CSS样式

 

  1>给body添加 透视效果 perspective: 1000px;
  2>给section 添加 大小,一定不要忘记添加  3d呈现效果控制里面的6个div
  3>别忘记子绝父相,section要加相对定位
  4>里面6个div 全部绝对定位叠到一起,然后移动不同角度旋转和距离
注意:旋转角度用rotateY   距离 肯定用 translateZ来控制
给section  添加动画animation ,让它可以自动旋转即可

 

 




    
    
    
    Document
    



    

 

 

 

 

你可能感兴趣的:(H5C3综合案例)