一、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. SpringBoot+SpringAOP+Java自定义注解+mybatis实现切库读写分离

    一.定义我们自己的切库注解类 自定义注解有几点需要注意: 1)@Target 是作用的目标,接口.方法.类.字段.包等等,具体看:ElementType 2)@Retention 是注解存在的范围,R ...

  2. django搭建一个小型的服务器运维网站-拿来即用的bootstrap模板

    目录 项目介绍和源码: 拿来即用的bootstrap模板: 服务器SSH服务配置与python中paramiko的使用: 用户登陆与session; 最简单的实践之修改服务器时间: 查看和修改服务器配 ...

  3. mongodb更新数组中的所有匹配项

    假如集合中有如下数据 { "_id" : ObjectId("4b97e62bf1d8c7152c9ccb74"), "title" : & ...

  4. linux Ctrl+z和Ctrl+c的区别

    1.Ctrl+z 挂起进程,并不会结束,执行fg命令可以重新启动这个被挂起的命令. 2.Ctrl+c 终止进程

  5. python List使用

    1.enumerate 用在遍历中,返回下标和数据 name_arr = ["shijingjing", "renjiangfeng", "anqi& ...

  6. SAP BI vs. Oracle BI

    对比Oracle BI产品和SAP BI 产品,做一些简单的产品功能比较,经供参考. 这里把SAP和Oracle同类的产品放在一行,用于比较. SAP BI 特点 Oracle BI 特点 BW 和S ...

  7. Ubuntu首次安装后root权限解锁

    在ubuntu系统下,为了安全起见,在安装过程中,系统屏蔽了用户设置root用户.导致很多用户在使用过程中不知道root密码到底是什么. 可以使用如下方法解决: 先解除root锁定,为root用户设置 ...

  8. LeetCode: Construct Binary Tree from Inorder and Postorder Traversal 解题报告

    Construct Binary Tree from Inorder and Postorder Traversal Given inorder and postorder traversal of ...

  9. 在windows下nginx+django+flup python3

    1.安装python 下载最新的python版本,在本文撰写时为 python 3.4, 下载地址:https://www.python.org/ftp/python/3.4.0/python-3.4 ...

  10. stm32keilIDE遇到的bug

    最进项目中遇到keil中使用sscanf时,采取类正则表达 %*[^/]/%[^@]时不能正确得到的结果,同样的代码在gcc中运行通过.然后又遇到stm32 keil编译器printf带多个参数就卡死 ...