移动translate

<!doctype html>

<html>

<head>

    <meta charset="utf-8">

    <title>boxshadow</title>

    <style>

        .wrapper {

            width: 200px;

            height: 200px;

            border: 2px dotted red;

            margin: 20px auto;

        }

        .wrapper div {

            width: 200px;

            height: 200px;

            line-height: 200px;

            text-align: center;

            background:rosybrown;

            color:blueviolet;

            -webkit-transform: translate(50px,100px);

            -moz-transform:translate(50px,100px);

            transform: translate(50px,100px);

        }

    </style>

</head>

<body>

<div class="wrapper">

    <div>我向右向下移动</div>

</div>

</body>

</html


<!doctype html>

<html>

<head>

    <meta charset="utf-8">

    <title>boxshadow</title>

    <style>

        .wrapper {

            width: 200px;

            height: 200px;

            border: 2px dotted red;

            margin: 20px auto;

        }

        .wrapper div {

            width: 200px;

            height: 200px;

            line-height: 200px;

            text-align: center;

            background:rosybrown;

            color:blueviolet;

            -webkit-transform: translate(-50px);

            -moz-transform:translate(-50px);

            transform: translate(-50px);

        }

    </style>

</head>

<body>

<div class="wrapper">

    <div>我向左移动</div>

</div>

</body>

</html>

效果：

CSS3变形--旋转 rotate()

<!doctype html>

<html>

<head>

    <meta charset="utf-8">

    <title></title>

    <style>

        .wrapper {

            width: 200px;

            height: 200px;

            border: 1px dotted red;

            margin: 100px auto;

        }

        .wrapper div {

            width: 200px;

            height: 200px;

            background: blueviolet;

            -webkit-transform: rotate(45deg);

            transform: rotate(45deg);

        }

    </style>

</head>

<body>

<div class="wrapper">

    <div></div>

</div>

</body>

</html>


<!doctype html>

<html>

<head>

    <meta charset="utf-8">

    <title></title>

    <style>

        .wrapper {

            width: 200px;

            height: 200px;

            border: 1px dotted red;

            margin: 100px auto;

        }

        .wrapper div {

            width: 200px;

            height: 200px;

            background: orange;

            -webkit-transform: rotate(-20deg);

            transform: rotate(-20deg);

        }

    </style>

</head>

<body>

<div class="wrapper">

    <div></div>

</div>

</body>

</html>

　

演示结果　

CSS3中的变形--缩放 scale()

<!doctype html>

<html>

<head>

    <meta charset="utf-8">

    <title></title>

    <style>

        .wrapper {

            width: 200px;

            height: 200px;

            border:2px dashed red;

            margin: 100px auto;

        }

        .wrapper div {

            width: 200px;

            height: 200px;

            line-height: 200px;

            background: orange;

            text-align: center;

            color: #fff;

        }

        .wrapper div:hover {

            opacity: .;

            -webkit-transform: scale(1.5);

            -moz-transform:scale(1.5)

            transform: scale(1.5);

        }

    </style>

</head>

<body>

<div class="wrapper">

    <div>我将放大1.5倍</div>

</div>

</body>

</html>

演示结果

CSS3中的变形--矩阵 matrix()

<!doctype html>

<html>

<head>

    <meta charset="utf-8">

    <title></title>

    <style>

        .wrapper {

            width: 200px;

            height: 200px;

            border: 2px dotted red;

            margin: 40px auto;

        }

        .wrapper div {

            width:200px;

            height: 200px;

            background: blueviolet;

            -webkit-transform: matrix(,,,,,);

            -moz-transform:matrix(,,,,,);

            transform: matrix(,,,,,);

        }

    </style>

</head>

<body>

<div class="wrapper">

    <div></div>

</div>

</body>

</html>

演示结果：

matrix(scaleX(),skewX(),skewY(),scaleY(),translateX(),translateY()); 扭曲缩放加位移

X轴缩放，X轴扭曲，Y轴扭曲，Y轴缩放，X轴位移，Y轴位移

a为元素的水平伸缩量，1为原始大小；

b为纵向扭曲，0为不变；

c为横向扭曲，0不变；

d为垂直伸缩量，1为原始大小；

e为水平偏移量，0是初始位置；

f为垂直偏移量，0是初始位置

CSS3中的变形--原点 transform-origin

<!doctype html>

<html>

<head>

    <meta charset="utf-8">

    <title></title>

    <style>

        .wrapper {

            width: 300px;

            height: 300px;

            float: left;

            margin: 100px;

            border: 2px dotted red;

            line-height: 300px;

            text-align: center;

        }

        .wrapper div {

            background: orange;

            -webkit-transform: rotate(45deg);

            transform: rotate(45deg);

        }

        .transform-origin div {

            -webkit-transform-origin: left top;

            transform-origin: left top;

        }

    </style>

</head>

<body>

<div class="wrapper">

    <div>原点在默认位置处</div>

</div>

<div class="wrapper transform-origin">

    <div>原点重置到左上角</div>

</div>

</body>

</html>

演示结果：

CSS3中的变形--扭曲 skew()

HTML代码：

<div class="wrapper">

  <div>我变成平形四边形</div>

</div>

CSS代码：

.wrapper {

  width: 300px;

  height: 100px;

  border: 2px dotted red;

  margin: 30px auto;

}

.wrapper div {

  width: 300px;

  height: 100px;

  line-height: 100px;

  text-align: center;

  color: #fff;

  background: orange;

  -webkit-transform: skew(45deg);

  -moz-transform:skew(45deg) 

  transform:skew(45deg);

}

演示结果

CSS3 Transform实例的更多相关文章

  1. 【CSS3】 理解CSS3 transform中的Matrix(矩阵)

    理解CSS3 transform中的Matrix(矩阵) by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu ...

  2. 理解CSS3 transform中的Matrix(矩阵)

    一.哥,我被你吓住了 打架的时候会被块头大的吓住,学习的时候会被奇怪名字吓住(如“拉普拉斯不等式”).这与情感化设计本质一致:界面设计好会让人觉得这个软件好用! 所以,当看到上面“Matrix(矩阵) ...

  3. 理解CSS3 transform中的Matrix(矩阵)——张鑫旭

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=2427 一.哥,我被你 ...

  4. CSS3 Transform变形理解与应用

    CSS3 Transform变形理解与应用 Transform:对元素进行变形:Transition:对元素某个属性或多个属性的变化,进行控制(时间等),类似flash的补间动画.但只有两个关键贞.开 ...

  5. css3 transform中的matrix矩阵

    CSS3中的矩阵CSS3中的矩阵指的是一个方法,书写为matrix()和matrix3d(),前者是元素2D平面的移动变换(transform),后者则是3D变换.2D变换矩阵为3*3, 如上面矩阵示 ...

  6. 小心 CSS3 Transform 引起的 z-index "失效"

    https://www.douban.com/note/343402554/ http://www.jb51.net/css/255811.html 最后我直接removeClass;把transfo ...

  7. CSS3 transform rotate（旋转）锯齿的解决办法

    -moz-transform: rotate(5deg);-webkit-transform: rotate(5deg); 把图片旋转了5度.本以为轻而易举,可遇到了问题.在Fireofx中显示正常, ...

  8. CSS3 transform对普通元素的N多渲染影响

    一.一入transform深似海 一个普普通通的元素,如果应用了CSS3 transform变换,即便这个transform属性值不会改变其任何表面的变化(如scale(1), translate(0 ...

  9. CSS3 transform 属性

    CSS3 transform 属性 语法: transform: none|transform-functions; 值 描述 none 定义不进行转换. matrix(n,n,n,n,n,n) 定义 ...

随机推荐

  1. sqlserver 查询当前阻塞进程 并杀掉

    select * from master.dbo.sysprocesses where DB_NAME(dbid)=’test’ and spid<>@@SPID 看看阻塞的进程 然后ki ...

  2. 高通Camera驱动分析【转】

    本文转载自:http://blog.csdn.net/liwei16611/article/details/53955711 1.Sensor slave配置 结构体msm_camera_sensor ...

  3. SQL优化案例

    8月9日对数据库进行优化 每日22:00开始跑批 经过优化,跑批时间缩短 逻辑读对比: 20180808逻辑读 20180809逻辑读 优化前后CPU负载对比:

  4. 十六、简单配置jenkins执行本地的robotframework项目

    A.前期准备: 1.登录jenkins 2.系统管理-插件管理-高级-上传插件(http://mirrors.jenkins-ci.org/plugins/robot/,中选择一个版本的插件下载至本地 ...

  5. AtomicReference 源码分析

    AtomicReference AtomicReference 能解决什么问题?什么时候使用 AtomicReference? 1)AtomicReference 可以原子更新引用对象. 2)comp ...

  6. 阶段1 语言基础+高级_1-3-Java语言高级_1-常用API_1_第4节 ArrayList集合_19-ArrayList练习四_筛选集合

    大集合里面循环装了20个int类型的随即数字 下面要自定义方法,这个方法专门负责筛选 遍历偶数的集合 重点是集合当做方法的参数,还能当做集合的返回值

  7. 阶段1 语言基础+高级_1-3-Java语言高级_06-File类与IO流_01 File类_8_File类遍历(文件夹)目录功能

    遍历这个目录下的文件 遍历一个文件就会报错’ 不存在的路径,也会报空指针异常 遍历可以获取到隐藏的文件夹和文件.常见一个隐藏的文件和文件夹 ListFiles私有类型的数组

  8. 测开之路九十五：css进阶之光标和溢出内容处理

    光标样式:cursor 准备文字 css 溢出内容处理:overflow,默认溢出部分是显示 先把内容放到盒子里面 正常显示 不显示溢出内容 显示为滚动条 自动处理 css /* 光标样式 */p{ ...

  9. UI自动化之异常与截图处理

    对操作不成功时,希望能够继续执行其他操作,或者是,希望操作不成功时,能够写日志记录 目录 1.常见异常 2.截图处理 1.常见异常 1.NoSuchElementException:没有找到元素 2. ...

  10. python接口自动化：响应内容中json字符串对象的处理

    实现代码如下: import json #定义一个字典.一个列表.两个字符串({}中必须是双引号) di1={"} di2=[{"}] di3='{"name" ...