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. CDQ分治求不知道多少维偏序 (持续更新 ]

    求三维偏序的模板 : //Author : 15owzLy1 //luogu3810.cpp //2018 12 25 16:31:58 #include <cstdio> #includ ...

  2. Java基础7-异常;jar包

    昨日内容回顾 多态:多种状态,多态的前提条件是继承或者是实现 面向接口编程 降低耦合度 接口是最低标准,接口可以多重继承 接口中的所有方法都是抽象方法 抽象类中可以没有抽象方法 匿名内部类对象 将对类 ...

  3. k64 datasheet学习笔记25--Multipurpose Clock Generator (MCG)

    0.前言 MCG模块为MCU提供了几种可选时钟源.模块包含一个FLL和一个PLL.FLL使用内部或外部参考时钟是可控的,PLL受外部参考时钟控制 模块可以选择FLL或PLL输出时钟,或内/外部参考时钟 ...

  4. left join on和where

    left join on: 向左关联某个表记录,意思是以左边的表记录为基准,通过关联条件会从左表返回所有的行,即使在右表中没有匹配的行. 举个例子: select * from A left join ...

  5. centos7 docker升级到最新稳定版本

    原文:centos7 docker升级到最新稳定版本 一.前言 docker的版本分为社区版docker-ce和企业版dokcer-ee社,区版是免费提供给个人开发者和小型团体使用的,企业版会提供额外 ...

  6. 【原创】大数据基础之ElasticSearch（3）升级

    elasticsearch版本升级方案 常用的滚动升级过程(Rolling Upgrade)如下: $ curl -XPUT '$es_server:9200/_cluster/settings?pr ...

  7. C++入门篇一

    双冒号(::)的作用:作用域运算符,全局作用域 void LOL::game1(){//在LOL命名空间下面的game1 cout << "LOL游戏开始" <& ...

  8. 《学习之道》第八章孤军奋战or组队合作

    孤军奋战与组队合作:别再苦思冥想,拖延行为需要差别对待 对拖延我得提一个小建议,你要暂时把自己与那些会干扰你的人和事隔离开.自己到一个房间里去,或者去图书馆,这样就没什么事能让你分心了. 如果一门课让 ...

  9. CSS/Xpath 选择器 第几个子节点/父节点/兄弟节点

    0.参考 1.初始化 In [325]: from scrapy import Selector In [326]: text=""" ...: <div> ...

  10. excel数据导入mysql

    先把excel数据另存成txt文件 Load Data InFile 'D:/1.txt' Into Table `res_type_collect` fields terminated by '@‘ ...