移动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. [CF1054C]Candies Distribution

    题目:Candies Distribution 传送门:http://codeforces.com/problemset/problem/1054/C 分析: 方法一: 1)类似拓扑排序的做法. 2) ...

  2. MacOS上zsh环境设置默认jdk

    进入home目录 cd ~ 修改.zprofile文件 vi .zprofile 按i进入vim插入模式,添加以下代码 export JAVA_HOME="/Library/Java/Jav ...

  3. 北风设计模式课程---依赖倒置原则（Dependency Inversion Principle）

    北风设计模式课程---依赖倒置原则(Dependency Inversion Principle) 一.总结 一句话总结: 面向对象技术的根基:依赖倒置原则(Dependency Inversion ...

  4. The JavaScript this Keyword

    https://www.w3schools.com/js/js_this.asp What is this? The JavaScript this keyword refers to the obj ...

  5. What is the difference between Kill and Kill -9 command in Unix?

    w difference kill -9 pid and kill pid command - Ask Ubuntu  https://askubuntu.com/questions/791841/d ...

  6. Jeecg心得篇--这个世界不缺程序员，而是缺少匠人和架构师

    真正的快乐,是用自己喜欢的方式过完这一生.来人间一趟,不能只为了活着. 这个世界不缺程序员,而是缺少匠人精神的架构师与产品经理. 因为他们通过自己的行为与理念默默地改变着世界,一个更好的世界. 这是我 ...

  7. JDBC 查询mysql数据库比客户端工具慢的解决办法

    在URL链接参数中配置rewriteBatchedStatements.useServerPrepStmts为true url="jdbc:mysql://****/dbName?useSS ...

  8. Babel编译：动态计算的属性名

    ES2015允许使用表达式作为属性名. 编译前: const HELLO = 'hello'; let dog = { [HELLO](){ console.log('hello'); } } 编译后 ...

  9. selenium验证码处理之cookie登录

    在实际测试中会经常见到登录操作需要验证码验证登录 常见验证有以下几种: 验证码登录 图片识别   图片滑块识别验证   4.简单验证码计算 针对上面的登录验证解决办法有以下几种: 1.让开发去掉验证码 ...

  10. 【HANA系列】SAP HANA 1.0 SPS 11 新特性

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[HANA系列]SAP HANA 1.0 SPS ...