一、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. 如何在Windows环境下安装JDK

    原文链接:http://android.eoe.cn/topic/android_sdk 1. JDK 的下载 JDK有好几个类型版本,我们只需要选择Java SE类型的版本就行了. 进入网页:htt ...

  2. Scala语言开发入门

    在本系列的第一篇文章 <使用递归的方式去思考>中,作者并没有首先介绍 Scala 的语法,这样做有两个原因:一是由于过多的陷入语法的细节其中,会分散读者的注意力.反而忽略了对于基本概念,基 ...

  3. andorid 直接解压后的xml的解密

    1.首先可以去看看这个gitHub: https://github.com/tracer0tong/axmlprinter 2.把apk.py 和 axmlprinter.py下载下来. 2.1(如果 ...

  4. 使用jquery插件ajaxfileupload一次上传多个文件，示例

    @{ ViewBag.Title = "Index"; Layout = ""; } <!DOCTYPE html PUBLIC "-//W3C ...

  5. iptables防火墙与日志系统配合使用 监控服务器特点端口的防问源IP

    /etc/sysconfig/iptables -A INPUT -p tcp --dport 80 -j LOG --log-level 5 --log-prefix "PORT_80:& ...

  6. HTML5学习笔记（二十七）：Ajax

    在Ajax出现之前,网页页面加载后,需要请求服务端数据刷新页面时,整个页面都需要重新加载一次,对于只有一小个区域的数据更新也必须刷新整个页面. 这个窘境在出现XMLHttpRequest对象之后得到了 ...

  7. artificial%20intelligence%20a%20modern%20approach

    http://stpk.cs.rtu.lv/sites/all/files/stpk/materiali/mi/artificial%20intelligence%20a%20modern%20app ...

  8. Cloud Resource

    Cloud Public Cloud Aliyun AWS Azure Cloud Stack SDN指南 DNS:Band Private Cloud DC/OS OpenStack Hybrid ...

  9. [Windows Azure] What is a cloud service?

    What is a cloud service? When you create an application and run it in Windows Azure, the code and co ...

  10. Python模块学习——tempfile

    主要有以下几个函数: tempfile.TemporaryFile 如何你的应用程序需要一个临时文件来存储数据,但不需要同其他程序共享,那么用TemporaryFile函数创建临时文件是最好的选择.其 ...