一、transform是哈?

　　从字面意思来看　transform的含义是：改变，使…变形；转换,对　没错　就是变形

　　变形当有　放大缩小 东倒　西歪,刚好css3中 transform 也出这个　放几个类似词

　　transform:rotate(旋转)一个东西你想旋转多少度 就是多少 #rotate { -webkit-transform:rotate(10deg);},

　　它的方向是顺时针方向 0- n度随你玩 当然你输入一个负数也可以玩的

　　transform:skew(倾斜) 有点东倒西摆的样子和旋转有点类似但又不同,这个倾斜是把东西压扁了模样变形了

　　以垂直方向Y轴来分　左边为正,右边负

　　transform:scale　比例skwe:表示比例　是原来的多少倍　就是在原基础上放大或者缩小

　　transform:translate 变动,一听起哈叫变动太转业了吧,其实就是x y改变发生位移 如translate(-120px,-100px);

　　-120px表示向左位移 -100表示向上位移

二、看看transform出现哈效果

　　

对照一的说明,在来看二的效果图　现在是不是知道 transform的基本功效果了!

三、上代码:

　　

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

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>css3元素旋转</title>

    <style type="text/css">

        .demo {

            margin: 50px auto;

            width:200px;

            height:100px;

            background-color:yellow;

        }

        /*rotate旋转: 是以顺时针方向*/

        #rotate { -webkit-transform:rotate(10deg);}

        /*skew倾斜: 以垂直方向Y轴来分　左边为正,右边负*/

        #skew {-webkit-transform:skew(30deg);}

        /*比例skwe:表示比例　是原来的多少倍*/

        #scale{-webkit-transform:scale(1.5);}

        /*translate变动： -120px表示向左位移 -100表示向上位移*/

        #translate{-webkit-transform:translate(-120px,-100px);

        -moz-transform:translate(120px,0)}

    </style>

</head>

<body>

<div style="float:left; margin-left:100px">

    <div class="demo" id="Div1">

        你好world,我是角度旋转rotate

    </div>

    <br />

    <div class="demo" id="Div2">

        你好world,我是倾斜skew

    </div>

    <br />

    <div class="demo" id="Div3">

        你好world,我是比例scale

    </div>

    <br />

    <div class="demo" id="Div4">

        你好world,我是变动 位移 translate

    </div>

</div>

<div style="float:left; margin-left:200px">

    <div class="demo" id="rotate">

        你好world,我是角度旋转rotate

    </div>

    <br />

    <div class="demo" id="skew">

        你好world,我是倾斜skew

    </div>

    <br />

    <div class="demo" id="scale">

        你好world,我是比例scale

    </div>

    <br />

    <div class="demo" id="translate">

        你好world,我是变动 位移 translate

    </div>

<div>

</body>

</html>

好了初始就认识到这里.......

css3学习系列之初识 transform (一)的更多相关文章

  1. CSS3学习系列之动画

    Transitions功能使用方法 在css3中,transitions功能通过将元素的某个属性从一个属性值在指定的时间内平滑过渡到另一个属性值来实现动画功能,可通过transitions属性来使用t ...

  2. Node.js实战项目学习系列(1) 初识Node.js

    前言 一直想好好学习node.js都是半途而废的状态,这次沉下心来,想好好的学习下node.js.打算写一个系列的文章大概10几篇文章,会一直以实际案例作为贯穿的学习. 什么是node Node.js ...

  3. css3学习系列之选择器（一）

    CSS3中的属性选择器 [att*=val]属性选择器:[att*=val]属性选择器的含义是:如果元素att表示的属性之属性值中包含用val指定的字符的话,则该元素使用这个样式. [att^=val ...

  4. CSS3学习系列之选择器（二）

    first-child选择器和last-child选择器 first-child指定第一个元素.last-child指定最后一个子元素. 例如: <!DOCTYPE html> <h ...

  5. CSS3学习系列之选择器（四）

    使用选择器来插入文字 css2中,使用before选择器在元素前面插入内容,使用after选择器在元素后面插入内容,在选择器的content属性中定义要插入的内容.将content属性值设定为none ...

  6. CSS3学习系列之字体

    给文字添加阴影 在CSS3中,可以使用text-shadow属性给页面上的文字添加阴影效果.text-shadow属性是在css2中定义的,在css2.1中删除,在css3的text模块中有恢复了,用 ...

  7. CSS3学习系列之盒样式（一）

    盒的基本类型 在css中,使用display属性来定义盒的类型,总体上来说,css中的盒分为block类型与inline类型 inline-block类型 inline-block类型是在css2.1 ...

  8. CSS3学习系列之盒样式（二）

    text-overflow属性 当通过把overflow属性的属性值设定为"hidden"的方法,将盒中容纳不下的内容隐藏起来时,如果使用text-overflow属性,可以在盒的 ...

  9. CSS3学习系列之背景相关样式（一）

    新增属性: background-clip:指定背景的显示范围 background-origin:指定绘制背景图像时的起点 background-size:指定背景中图像的尺寸 background ...

随机推荐

  1. java类加载，简单认识

    java类加载,简单认识 在第一次创建一个类的对象或者第一次调用一个类的静态属性和方法的时候,会发生类加载 类加载期间,如果发现有静态属性,就给对应的静态属性分配内存空间,并赋值 这个过程完成之后,今 ...

  2. WPF对象级资源的定义与查找

    文章概述: 本演示介绍了怎样定义WPF对象级的资源,并通过XAML代码和C#訪问和使用对象级资源. 相关下载(代码.屏幕录像):http://pan.baidu.com/s/1hqvJNY8 在线播放 ...

  3. Shader中ColorMask的使用

    ColorMask可以对输出颜色进行Mask处理 使用方法和Cull这些标记差不多 SubShader { ColorMask R Cull Off .... 如果ColorMask填0就什么都不显示

  4. [na]IP分片抓包实验

    这两点比较重要 1.IP+ICMP+DATA = 1500字节 2.ping size指定的是data的大小. 3,可以ping大包+不分片检测mtu(分片发生在出口,如果包尺寸大于接口ip mtu, ...

  5. 使用 nw-builder 构建跨平台桌面应用程序

    NW.js 是一个使用 Web 技术创建本地应用的框架,如 HTML.JavaScript 和 CSS.简单地说,当你在使用普通的流程开发一个 Web 应用时,开发完成后,运行一个生成器,将所有东西编 ...

  6. rdesktop 源码安装

    # ./configure --prefix=/data/apps/rdesktop-1.6.0 #make && make install

  7. mongodb学习比较(数据操作篇)

    1.  批量插入:     以数组的方式一次插入多个文档可以在单次TCP请求中完成,避免了多次请求中的额外开销.就数据传输量而言,批量插入的数据中仅包含一份消息头,而多次单条插入则会在每次插入数据时封 ...

  8. DataTable的初始化与事件注册

    TypeScript代码: let tabledata = data as any[]; if (this.dataTable) { this.dataTable.clear(); this.data ...

  9. 每日英语:Why Mom's Time Is Different From Dad's Time

    Several years ago, while observing a parenting group in Minnesota, I was struck by a confession one ...

  10. 每日英语：Pediatricians Set Limits on Screen Time

    Parents should ban electronic media during mealtimes and after bedtime as part of a comprehensive 'f ...