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. webpack学习笔记——sourcemap(使用webpack打包的项目如何调试代码)

    [webpack]devtool里的7种SourceMap模式是什么鬼? 里面详细介绍了7种模式的区别,和建议使用. webpack sourcemap 选项多种模式的一些解释 两篇文章大同小异,第一 ...

  2. win10自带邮箱添加网易企业邮箱

    开始-邮件-账户-添加账户-高级安装程序-internet电子邮件-然后输入网易企业邮箱的用户名和相关服务器设置就行了 接收服务器 pop.qiye.163.com发送服务器 smtp.qiye.16 ...

  3. input（type="checkbox"|type="radio"）+jquery使用

    1.用.is(":checked")判断input是否为选中状态 例: var value=$(this).is(":checked"); localStora ...

  4. 第五节，python基本语法

    1.类(Class) Python中的类的概念与其它语言类似,比较特殊的是protected和private在python中没有明确的限制,通常的惯例是用单下划线_表示protected,用双下划线开 ...

  5. springboot上传文件 & 不配置虚拟路径访问服务器图片 & springboot配置日期的格式化方式 & Springboot配置日期转换器

    1.    Springboot上传文件 springboot的文件上传不用配置拦截器,其上传方法与SpringMVC一样 @RequestMapping("/uploadPicture&q ...

  6. jarvis level6_x64堆溢出unlink拾遗

    level6 32位的我没有调出来,貌似32位的堆结构和64位不太一样,嘤嘤嘤?,所以做了一下这个64位的,题目地址,level6_x64 首先看一下程序的结构体 struct list //0x18 ...

  7. nginx+tomcat：动静分离+https

    nginx server { listen 80; server_name 192.168.0.103; # http访问重写为https rewrite ^ https:/$http_host$re ...

  8. 【原创】大叔问题定位分享（2）spark任务一定几率报错java.lang.NoSuchFieldError: HIVE_MOVE_FILES_THREAD_COUNT

    最近用yarn cluster方式提交spark任务时,有时会报错,报错几率是40%,报错如下: 18/03/15 21:50:36 116 ERROR ApplicationMaster91: Us ...

  9. 关于git 远程仓库密码一直输错的问题

    解决方法, git 换地方使用后需要重新配置秘钥,一个钥匙开一个地方的门: 如果还不行, 在控制面板-用户账户-凭据管理-加添凭证,输入正确的账号密码:因为Windows的凭据管理器里面可能保存了你刚 ...

  10. 解决微信小程序Video 某些属性设置不起作用问题

    <video controls="{{false}}" autoplay="{{true}}"></video> 设置属性务必要使用{{ ...