一、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. CSS边框闪烁呼吸样式

    <html> <body> <head> .arrow_box{animation: glow 800ms ease-out infinite alternate; ...

  2. Unity5 BakeGI(Mixed Lighting)小记

    1.模型需勾选Generate Lightmap UVs,否则烘培图像撕裂. 2.关于为何新版的改叫Mixed Lighting,猜测是之前属于全部烘培,现在算是部分烘培,实时阴影和烘培阴影可以混用, ...

  3. 从头认识java-15.7 Map（5）-介绍HashMap的工作原理-Key变了，能不能get出原来的value？（偶尔作为面试题）

    这一章节我们讨论一个比較特殊的情况Key变了,能不能get出原来的value? 答案是:有时能够,有时不能够 1.能够的情况: package com.ray.ch14; import java.ut ...

  4. bug ,improvements, features jira等信息

    https://issues.apache.org/jira/secure/ReleaseNote.jspa?version=12341764&projectId=12315522 https ...

  5. Sql Server 2008 清除日志

    --在SQL2008中清除日志就必须在简单模式下进行,等清除动作完毕再调回到完全模式. USE [master] GO ALTER DATABASE SSCDZ SET RECOVERY SIMPLE ...

  6. [Windows Azure] Create a Virtual Network for Site-to-Site Cross-Premises Connectivity

    Create a Virtual Network for Site-to-Site Cross-Premises Connectivity This tutorial walks you throug ...

  7. 简单的sqlhelper的学习日志

    一:今天做了一个简单的sqlhelper,还有调用,将今天学的内容总结一下,解决方案如下: 二:对应的sqlhelper的内容: using System; using System.Collecti ...

  8. python(41):copy拷贝(深拷贝deepcopy与浅拷贝copy)

    Python中的对象之间赋值时是按引用传递的,如果需要拷贝对象,需要使用标准库中的copy模块. 1.copy.copy 浅拷贝 只拷贝父对象,不会拷贝对象的内部的子对象. 2.copy.deepco ...

  9. DIOCP开源项目-DIOCP3的ECHO测试<贴图>

    星期六开了测试台测试机子.星期天休息,今天早上来接两个图 开了2个客户端,一个qsl的echo client,一个是楠楠的dbiocp回调客户端.建立13240个连接 今天来后,机子很卡,后来发现是楠 ...

  10. Git补充命令行操作操作

    Git命令行基本操作这里有我之前整理的git基本操作,常用的操作. 本文以实际功能和实例来说明git GUI的实现原理. 单独更新特定文件 $ git checkout readme.md 删除特定文 ...