Css3 3D 旋转动画效果
阅读原文时间:2023年07月08日阅读:1

需求:

1、一个列表滑动效果为360 旋转

准备:

1、css 基础

2、Css 动画基础animation

3、transform-style概念

4 transform 概念

5 JavaScript 基础

过程描述:

1、创建一组DIV 父子div

2、调整子级div的Y轴 以及 Z轴(y:子级div要旋转的角度,单位为deg,z:子级div距离父级div的距离,常用单位为px)

3、旋转父级div

要点:

1、子级div必须相对于父级div进行定位

2、父子div 宽高比尽量一致(不一致也可以,但是需要单独计算、很复杂)*

3、父级div  preserve-3d 3D变化属性

代码神马的就不写了,百度一搜一大堆.主要是理解这个概念.

手机扫一扫

移动阅读更方便

阿里云服务器
腾讯云服务器
七牛云服务器

你可能感兴趣的文章