一、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. leetcode第一刷_Combinations

    生成组合数是初中的知识,没有人不知道. 组合数学我觉得是最有意思的数学分支,室友应该是这方面的专家,他的纸牌问题我听都听不懂.. 不知道你们是什么感觉.我以看到组合数,立即会想到全排列.这可能是由于当 ...

  2. 高精度运算库gmp

    网址:www.gmplib.org 我下载的是 6.1.2版本:https://gmplib.org/download/gmp/gmp-6.1.2.tar.bz2 执行操作如下: 1. tar -jv ...

  3. Atitit 图像处理之编程之类库调用的接口api cli gui ws rest  attilax大总结.docx

    Atitit 图像处理之编程之类库调用的接口api cli gui ws rest  attilax大总结.docx 1. 为什么需要接口调用??1 1.1. 为了方便集成复用模块类库1 1.2. 嫁 ...

  4. Python:sitecustomize 和 usercustomize

    Python提供了两个hook用于定制Python:sitecustomize 和 usercustomize,首先需要查看site包目录, 然后就可以在此目录下创建usercustomize.py文 ...

  5. linux下配置某程序的sudo不用输密码

    $ su密码: # cd /etc/# cp sudoers sudoers_bak# vi sudoers 最下面加入一行:ALL ALL = NOPASSWD:/usr/sbin/openconn ...

  6. flex布局知识点（阮一峰博客）

    任何一个容器都可以指定为flex布局: 行内元素也可以使用flex布局: 设为flex布局以后,子元素的float,clear,vertical-align属性都将失效: flex容器的属性: fle ...

  7. Testng生成的测试报告乱码解决办法

    Testng生成的测试报告乱码解决办法 2017-06-16 1 问题描述 乱码是程序编码不统一,比如Java源代码是utf-8,编译是gbk,这时会乱码. 代码如下: org.testng.Repo ...

  8. Windows + Ubuntu双系统时间不一致

    在安装Ubuntu和Windows双系统的情况下,Ubuntu的时间总会和Windows的时间相差8小时,原因在于widows认为BIOS时间是本地时间,Ubuntu认为BIOS时间是UTC时间 su ...

  9. Win7窗口最大化和最小化快捷键

    原文: https://blog.csdn.net/u012269267/article/details/52484399 Windows 键 + 方向键“↑” 使当前使用的窗口最大化. Window ...

  10. LR中，URL -based script与HTML -based script区别

    在Web(HTTP/HTML)录制中,有2种重要的录制模式.用户该选择那种录制模式呢?HTML-mode录制是缺省也是推荐的录制模式.它录制当前网页中的HTML动作.在录制会话过程中不会录制所有的资源 ...