一、2D变换

  1、transform   设置或检索对象的转换

  取值:

  none::以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换,相当于直接应用一个[a,b,c,d,e,f]变换矩阵

translate(<length>[, <length>])。第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则默认值为0。

translateX(<length>):指定对象X轴(水平方向)的平移

  translateY(<length>):指定对象Y轴(垂直方向)的平移

rotate(<angle>):指定对象的2D rotation(2D旋转)。第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则默认取第一个参数的值

scaleX(<number>):指定对象X轴的(水平方向)缩放

  scaleY(<number>):指定对象Y轴的(垂直方向)缩放

skew(<angle> [, <angle>]):指定对象skew transformation(斜切扭曲)。第一个参数对应X轴,第二个参数对应Y轴。如果第二个参数未提供,则默认值为0                     skewX(<angle>):指定对象X轴的(水平方向)扭曲

  skewY(<angle>):指定对象Y轴的(垂直方向)扭曲

  注:不同浏览器需写以下前缀。

内核类型 写法
Webkit(Chrome/Safari) -webkit-transform
Gecko(Firefox) -moz-transform
Presto(Opera) -o-transform
Trident(IE) -ms-transform
W3C transform

例子:

CSS代码:

      #transform1
{
margin: 0 auto;
width: 100px;
height: 100px;
background-color: mediumvioletred;
-webkit-transform: rotate(15deg);
}

HTML代码:

<div id="transform1">旋转了15度</div>

 2、transform-origin  设置或检索对象以某个原点进行转换。

  取值:

  <percentage>:用百分比指定坐标值。可以为负值。

<length>:用长度值指定坐标值。可以为负值。

left:指定原点的横坐标为leftcenter①:指定原点的横坐标为

centerright:指定原点的横坐标为

righttop:指定原点的纵坐标为

topcenter②:指定原点的纵坐标为

centerbottom:指定原点的纵坐标为bottom 

  不同浏览器下的写法:

内核类型 写法
Webkit(Chrome/Safari) -webkit-transform-origin
Gecko(Firefox) -moz-transform-origin
Presto(Opera) -o-transform-origin
Trident(IE) -ms-transform-origin
W3C transform-origin

  

  例子:

  CSS代码:

        #transform1
{
margin: 0 auto;
width: 100px;
height: 100px;
background-color: mediumvioletred;
-webkit-transform: rotate(15deg);/*旋转15度*/
-webkit-transform-origin: left top; /*以左上角为原点旋转*/
}

  HTML代码:

<div id="transform1"></div>

  

   二、过渡样式

    1、transition-property  检索或设置对象中的参与过渡的属性。

    取值:

    all:所有可以进行过渡的css属性
   none:不指定过渡的css属性
 有过渡效果的属性:
  
        例子:
    CSS代码: 
         #transform1
{
margin: 0 auto;
width: 100px;
height: 100px;
background-color: red;
transition-property: background-color; }
#transform1:hover
{
transition-duration:.5s;
transition-timing-function:ease-in;
background-color: yellow;
}
    HTML代码:
<div id="transform1">请将鼠标放在上面</div>
请将鼠标放在上面
      2、transition-duration   检索或设置对象过渡的持续时间
     transition-duration:time
     例子可参见上个例子。
    3、transition-timing-function  检索或设置对象中过渡的动画类型。
   取值:
   linear:线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0)
          ease:平滑过渡。等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0)
          ease-in:由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0, 1.0)
          ease-out:由快到慢。等同于贝塞尔曲线(0, 0, 0.58, 1.0)
          ease-in-out:由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)cubic-bezier(<number>, <number>, <number>, <number>):特定的贝塞尔曲线类型,4个数值需           在[0, 1]区间内。
   例子可参见上个例子。
 
   4、transition-delay   设置对象延迟过渡的时间。
 
   CSS代码:
        #delay1
{
background-color: antiquewhite;
width:100px;
height:100px;
}
#delay1:hover
{
transition-delay:1s;
transition-timing-function:ease-in;
background-color: black;
}
#delay2
{
background-color: antiquewhite;
width:100px;
height:100px;
}
#delay2:hover
{
transition-delay:4s;
transition-timing-function:ease-in;
background-color: blue;
}
   HTML代码; 
<div id="delay1">延迟1s后开始过渡</div>
<div id="delay2">延迟4s后开始过渡</div>
延迟1s后开始过渡
延迟4s后开始过渡
 
      ***一般情况下可以将变形与过渡结合使用制作出一些特别的效果。
        例:
  CSS代码:
  

        #all
{
width: 100px;
height: 100px;
background-color: red;
}
#all:hover
{
background-color: yellow;
transition-delay: .5s;
transition-timing-function: ease-in;
transform: scale(1.5,1.5);
transition-duration: 1s;
}
  HTML代码:
  <div id="all">请把鼠标放在上面查看效果</div>
请把鼠标放在上面查看效果

CSS常用样式(三)的更多相关文章

  1. CSS常用样式(四)之animation

    上篇CSS常用样式(三)这篇博文中已经介绍过了CSS中具有动画效果的transition.transform,今天来大概说说CSS中的animation.animation的加入会使得动画效果更加乐观 ...

  2. css常用样式font控制字体的多种变换

    CSS 字体属性定义文本的字体系列.大小.加粗.风格(如斜体)和变形(如小型大写字母)font-family控制字体,由于各个电脑系统安装的字体不尽相同,但是基本装有黑体.宋体与微软雅黑这三款字体,通 ...

  3. CSS常用样式及示例

    CSS常用样式及示例 一.简介      层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集) ...

  4. 从零开始学习前端开发 — 9、标签嵌套规则及CSS常用样式覆盖

    1. 块级元素可以包含内联元素或某些块级元素,但内联元素却不能包含块级元素,它只能包含其它的内联元素: <div><h1></h1><p></p& ...

  5. css常用样式对文本的处理演练

    CSS文本属性可定义文本的外观,这是毫无疑问的,其次css可以通过以下属性改变文字的排版,比方说letter-spacing实现字符间距text-indent: 2em;完成首行缩进2字符word-s ...

  6. CSS常用样式整理

    元素边框显示圆角:-moz-border-radius适用于火狐浏览器,-webkit-border-radius适用于Safari和Chrome两种浏览器. 浏览器渐变背景颜色: FILTER: p ...

  7. CSS常用样式属性

    1.CSS字体和文本相关属性 属性 font-family 规定文本的字体系列,比如:“serif” ''sans-serif" font-size 规定文本的字体尺寸 font-style ...

  8. css常用样式属性详细介绍

    对于初学css的来说,肯定会觉得这么多样式不好记,而且记住了也容易忘,其实刚开始我们不用去记这么多的样式,确实是记了也会忘,刚开始只需记住一些常用的就可以了,然后在慢慢的使用过程当中接触并学习一些高级 ...

  9. CSS常用样式(二)

    一.边框样式 1.border:复合属性.设置对象边框的特性. 取值: border-width: 设置或检索对象边框宽度. border-style: 设置或检索对象边框样式. border-col ...

随机推荐

  1. JS实现单击按钮后弹出新的窗口页面

    点击按钮后,弹出指定大小的页面窗口. 效果图: 源码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&qu ...

  2. 初探JavaScript(三)——JS带我"碰壁"带我飞

    已经写了两篇关于小白的JavaScript之行,不可否认,每一种语言都有其精华与糟粕之处,来不及细细体味其精华奥妙,也没法对其评头论足,只能先了解,后深入.到目前为止已经看完<JavaScrip ...

  3. Microsoft Azure News(2) 在Microsoft Azure上运行SAP应用程序

    <Windows Azure Platform 系列文章目录> 2014年6月27日消息,在 Microsoft Azure 上提供 SAP Business Suite 软件.All-I ...

  4. 分享关于Entity Framework 进行CRUD操作实验的结果

    我们在使用Entity Framework框架进行CRUD时,经常会出现各种各样的错误,下面请看我的实验结果. 以下是只用一个上下文对象进行操作: 第一次: BlogDbContext blog = ...

  5. MVC的控制器的激活过程,我们从MvcHandler开始讲,前面的事情以后再讲

    一.从MvcHandler开始(不要觉得是代码,让你看懂才是最重要的) using Microsoft.Web.Infrastructure.DynamicValidationHelper; usin ...

  6. 【Android】Anroid5.0+新控件---酷炫标题栏的简单学习

    Android5.0+推出的新控件感觉特别酷,最近想模仿大神做个看图App出来,所以先把这些新控件用熟悉了. 新控件的介绍.使用等等网上相应的文章已经特别多了,题主也没那能力去写篇详解出来,本篇随笔记 ...

  7. [译]学习IPython进行交互式计算和数据可视化(七)

    第六章:定制IPython 对于高级用户,IPython可以进行定制和扩展.在本章结束之后,你将会知道: 怎样创建和使用自定义配置文件 怎样为高级功能进行IPython扩展 怎样在notebook中使 ...

  8. a:link a:visited a:hover a:active四种伪类选择器的区别

    a:link选择网页中所有没有被visited的a标签,就是没有鼠标悬停hover或者点击click(a链接没有被访问时的样式) a:visited选择网页中所有已经被click的a链接,用来告诉用户 ...

  9. Dapper学习 - Dapper.Rainbow(三) - Read

    前面已经介绍了新增/修改/删除了, 接下来介绍一下Rainbow的Read方法. 一.Read -- Rainbow原生 1. 先看测试代码 var conStr = ConfigurationMan ...

  10. SignalR入门之小试身手

    建立好持久性连接类TestConnection之后,现在为我们的SignalR程序配置持久性连接类以及访问路径. 进入刚刚建立的Startup类,进入Configuration这个方法里来配置: us ...