1、css3过渡

注意：记住多属性设置的方式；若把过渡写在了hover里面的话鼠标移走时不会有过渡效果！；不同属性同时变时用  all 就可以实现了。

2、css3  transform属性

1、移动  ---translate

　　　　2、旋转---rotate

　　

不同旋转点旋转案例

3、css3--3D变形

rotateX();     rotateY()；    rotateZ()--------3D旋转

透视：增加3D旋转的立体感

变形中心点默认是  center center

4、translate3d的使用方式

开门大吉案例

知识点：  1、子绝父相

　　　　　2、伪元素---插入元素

　　　　   3、3d旋转

　　　　　4、重新设置旋转点

　　　　　5、给旋转元素的父元素设置视距，增强3d效果

css学习_css3过渡的更多相关文章

  1. CSS学习笔记-过渡模块

    过渡模块:    1.过渡三要素        1.1必须要有属性发生变化        1.2必须告诉系统哪个属性需要执行过渡效果        1.3必须告诉系统过渡效果持续时长    2.格式: ...

  2. css学习_css3伸缩布局 flex布局

    1.flex布局 案例一: 案例二:   保证不至于缩放得太小或太大 案例三:flex的值不一定要写成几份,可以写成固定值 案例四: 竖着3等分(父容器按照高度3等分) !!案例  -----用fle ...

  3. CSS 3学习——transition 过渡

    以下内容根据官方规范翻译以及自己的理解整理. 1.介绍 这篇文档介绍能够实现隐式过渡的CSS新特性.文档中介绍的CSS新特性描述了CSS属性的值如何在给定的时间内平滑地从一个值变为另一个值. 2.过渡 ...

  4. CSS学习摘要-定位实例

    CSS学习摘要-定位实例 注:全文摘自MDN-CSS定位实例 列表消息盒子 我们研究的第一个例子是一个经典的选项卡消息框,你想用一块小区域包括大量信息时,一个非常常用的特征.这包括含有大信息量的应用, ...

  5. CSS学习笔记之CSS3新特性

    目录 1.边框 2.背景 3.文本 4.字体 5.转换 6.过渡 7.动画 8.多列 9.自定义尺寸 CSS 用于控制网页的样式和布局,而 CSS3 是最新的 CSS 标准,这篇文章将着重介绍 CSS ...

  6. CSS 学习手册

    目录 CSS 简介 1.CSS 简介 CSS 概述 层叠次序 2.CSS 基础语法 CSS 语法 值的不同写法和单位 记得写引号 多重声明: 空格和大小写 3.CSS 高级语法 选择器的分组 继承及其 ...

  7. CSS学习笔记

    CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...

  8. css学习归纳总结（三） 转

    原文地址:css学习归纳总结(三) 为文档添加样式的三种方法 行内样式 行内样式是写在HTML标签的style属性里的,比如: <p style="font-size: 12px;fo ...

  9. css学习归纳总结（二） 转

    原文地址:css学习归纳总结(二) 标签与元素 <p>标签和p元素有什么区别呢?大多数时候他们表示的是同一样东西,但仍有细微的区别.<p>.<div>等指的是HTM ...

随机推荐

  1. Pytorch 常用函数

    1. torch.renorm(input, p, dim, maxnorm, out=None) → Tensor Returns a tensor where each sub-tensor of ...

  2. 响应式bootstrap - demo

    参考资料: bootstrap:http://www.bootcss.com/ 汤姆大叔的博客: <深入理解Bootstrap>http://item.jd.com/11462962.ht ...

  3. Java_String&StringBuilder&StringBuffer类

    目录 一.String类 二."==" 和 "equals"的区别 三.StringBuffer和StringBuilder 一.String类 String为 ...

  4. Javascript—DOM

    1.什么是DOM? DOM 是 W3C(万维网联盟)的标准.DOM 定义了访问 HTML 和 XML 文档的标准: "W3C 文档对象模型(DOM)是中立于平台和语言的接口,它允许程序和脚本 ...

  5. 配置php5.6.4 + Apache2.4.10

    一.下载并安装apache 下载地址:www.apachelounge.com 解压后:执行以下命令: #httpd.exe –k install #httpd.exe -k start 在执行过程中 ...

  6. 将Emacs Org任务树导出至Freeplane思维导图

    Emacs Org mode作为实施GTD方法的任务与项目管理工具是极为强大和有效的.尽管如此,我在使用过程中亦发现了一个因Emacs文本操作模式而难以解决的情况,即对于具有复杂结构与大量细节的项目, ...

  7. IDEA 使用笔记

    IDEA 关闭默认打开上一个项目 File | Settings | Appearance & Behavior | System Settings=> Reopen last proj ...

  8. 昨天开始使用lr controller 已停止工作问题

    其实看到这个,只能看日志 看到日志也是无能为力 然后只能尝试修复,但是无法解决,最后通过重装系统,问题解决

  9. eclipse 下载安装单元测试log4j的配置与搭建

    搭建log4j的具体步骤 1.下载jar包放在lib 拓展库中 百度云下载 地址 链接:https://pan.baidu.com/s/1Cvb22kCJcymORehwhKnCrQ 提取码:b55m ...

  10. pip命令出现了问题，提示说找不到ssl模块

    Could not find a version that satisfies the requirement pygame (from versions: ) No matching distrib ...