需求：

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变化属性

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

Css3 3D 旋转动画效果的更多相关文章

  1. css3 3d旋转动画

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  2. CSS3 3D旋转动画代码实例

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. CSS3 3D旋转动画菜单

    在线演示 本地下载

  4. 3D Grid Effect – 使用 CSS3 制作网格动画效果

    今天我们想与大家分享一个小的动画概念.这个梦幻般的效果是在马库斯·埃克特的原型应用程序里发现的​​.实现的基本思路是对网格项目进行 3D 旋转,扩展成全屏,并呈现内容.我们试图模仿应用程序的行为,因此 ...

  5. 模仿百度首页“元宵节汤圆”动图，并实现360°不停旋转（CSS3的animation动画效果）

    模仿百度首页“元宵节汤圆”动图,并实现360°不停旋转(CSS3的animation动画效果) 效果图: 切图地址: https://ss1.bdstatic.com/5eN1bjq8AAUYm2zg ...

  6. 8套迷人精致的CSS3 3D按钮动画

    1.纯CSS3 3D按钮 按钮酷似牛奶般剔透 CSS3按钮一般都可以设计的非常漂亮,利用投影.渐变等CSS3属性特效可以把按钮渲染的十分动感.今天分享的这款CSS3按钮外观非常特别,它看上去酷似晶莹剔 ...

  7. 纯CSS实现3D正方体动画效果

    前言 纯CSS实现3D正方体动画效果,此方法是通过transform的旋转(rotate)和位移(translate)实现的,具体效果是鼠标滑过时正方体的一个面会产生位移 效果图 ​

  8. 拒绝IE8-,CSS3 transform rotate旋转动画效果（支持IE9+/chrome/firefox）

    <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta nam ...

  9. 25个CSS3 渐变和动画效果教程

    随着最新版CSS3渐变和动画功能发布,Web开发者在开发的过程中有了更多的选择.实际上,已经有了一些替代的技术,目的都是使网站的建设变得简易,高效和快速.不过CSS3所提供的渐变功能有着显著的优点,特 ...

随机推荐

  1. Liunx搭建Mysql服务器

    1:安装从网上下载文件的wget命令[root@master ~]# yum -y install wget 2:下载mysql的repo源[root@master ~]# wget http://r ...

  2. Thread类中yield方法

    Yield方法可以暂停当前正在执行的线程对象,让其他有相同优先级的线程执行.它是一个静态方法而且只保证当前线程放弃CPU占用而不能保证其它线程一定能占用CPU,执行yield()的线程有可能在进入到暂 ...

  3. 查询liunx上磁盘占用情况

    查询挂载盘磁盘情况 df -h 查询指定目录下的文件夹内存占用情况 du -hs /*

  4. C++ 中的User a, User b=a 和User a, User b, b=a的区别

    #include <iostream>using namespace std;class User{ public: int age; int number; User() { cout ...

  5. The Programmer's Oath程序员的誓言----鲍勃·马丁大叔（Bob Martin）

    In order to defend and preserve the honor of the profession of computer programmers, I Promise that, ...

  6. MySql 文件导入导出

    1.将表输出到文件 select * FROM zhilianzhaopin4 INTO OUTFILE 'G:/test.csv'      --------输出位置 fields terminat ...

  7. Linux 网络和端口命令

    一.查看网口IP等 显示或配置网络设备(网络接口卡)命令 sudo ifconfig 网口及ip信息 sudo ip link 网口信息 sudo ip addr 扫描端口是否开启服务,如下扫描 1至 ...

  8. Mysql的undo、redo、binlog的区别

      与不同引擎的关系 核心作用 生命周期   日志类型 undo log 属于innodb引擎独有 回滚,保证事务的"原子性",事务日志  事务开始前,以类似"快照&qu ...

  9. ArrayList线程不安全怎么办？（CopyOnWriteArrayList详解）

    ArrayList线程不安全怎么办? 有三种解决方法: 使用对应的 Vector 类,这个类中的所有方法都加上了 synchronized 关键字 就和 HashMap 和 HashTable 的关系 ...

  10. JavaScript之创建对象的模式

    使用Object的构造函数可以创建对象或者使用对象字面量来创建单个对象,但是这些方法有一个明显的缺点:使用相同的一个接口创建很多对象,会产生大量的重复代码. (一)工厂模式 这种模式抽象了创建具体对象 ...