移动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. 大数据笔记（十四）——HBase的过滤器与Mapreduce

    一. HBase过滤器 1.列值过滤器 2.列名前缀过滤器 3.多个列名前缀过滤器 4.行键过滤器5.组合过滤器 package demo; import javax.swing.RowFilter; ...

  2. VMware Workstation 14 Pro安装教程（详细）

    VMware Workstation 14 Pro安装教程(详细) 话不多说,直接上图,需要的拿走. 下载地址:https://download3.vmware.com/software/wkst/f ...

  3. 我用HTML写简历

    本文属于原创文章,转载请注明--来自桃源小盼的博客 起因 每次换工作写简历都是有点痛苦的事情,尤其是下载word模板,各种注册流程,有的还得买积分,冲会员,甚是不爽.就算下载好了,修改其中的一些细节也 ...

  4. release，debug库互调用，32位，64位程序与库互调用

    以下是基于visual studio 2015和cmake的实验 1,debug或release的应用程序都可以调用release的库2,win32和x64的应用和库无法互调用,在VS中链接时会有一堆 ...

  5. (转) intellij idea部署web项目时的位置(Tomcat)

    这篇文章说的比较好: 原文地址:https://blog.csdn.net/zmx729618/article/details/78340566 1.当你项目启动的时候console能看到项目运行的位 ...

  6. 读Dubbo源码，学习SPI

    核心类 ExtensionLoader 使用方法 定义接口,使用@SPI标记 @SPI("impl1") public interface SimpleExt { // @Adap ...

  7. 阶段1 语言基础+高级_1-3-Java语言高级_04-集合_06 Set集合_2_哈希值

    没有重写就是十进制的整数,重写了想返回多少就是多少. 创建Person类,没有写继承关系,默认会继承Object类 打开Object这个类 找到HashCode这个方法.就这一行代码.甚至都没有方法体 ...

  8. 测开之路一百二十三：快速搭建python虚拟环境

    前提:已装好python3.4+且环境可正常运行 一:手动搭建: 准备好一个工作目录 管理员运行cmd,进入到准备的目录里面 执行命令:python -m venv 虚拟环境名 激活虚拟环境(在ven ...

  9. MVC 源码系列之路由(二)

    MVCParseData和Match方法的实现 ### ParseData 那么首先要了解一下ParseData. //namespace Route public string Url { get ...

  10. linux--常用工具软件

    三大远程连接工具 crt notepad++ filezilla