移动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. iOS模拟器Custom Location被重置解决方案

    转自王中周的技术博客 问题说明   在做地图类应用时,经常需要用到位置模拟功能.iOS模拟器提供了该功能,我们可以设置指定的经纬度,选中模拟器后,按照以下菜单层次进入即可设置: Debug --> ...

  2. 字节对齐#pragma pack

    这是给编译器用的参数设置,有关结构体字节对齐方式设置, #pragma pack是指定数据在内存中的对齐方式. #pragma pack (n)             作用:C编译器将按照n个字节对 ...

  3. 使用JS将图片转为Base64

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. Cannot read property 'type' of undefined ....

    一直解决不了,弄了半天是 jquery 版本太低,换一个版本就ok.

  5. Illegal modifier for parameter *** , only final is permitted”

    大家好,我想在main函数中定义一个public变量,系统报错说“Illegal modifier for parameter chatRoom, only final is permitted”,如 ...

  6. H5 刮图-刮一刮

    <!DOCTYPE html><html><head><style>*{margin:0;padding:0} </style></h ...

  7. Log4net记录日志到本地或数据库

    OperatorLog /****** Object: Table [dbo].[OperatorLog] Script Date: SET ANSI_NULLS ON GO SET QUOTED_I ...

  8. Samba 1.0服务部署

    Samba是在Linux和UNIX系统上实现SMB协议的一个免费软件,由服务器及客户端程序构成. SMB协议是客户机/服务器型协议,客户机通过该协议可以访问服务器上的共享文件系统.打印机及其他资源. ...

  9. Window下，在TEMP路径下生成一个临时文件名

    BOOL GetFullTempFileName(const TCHAR* strPrefix, std::wstring& strFullName) { TCHAR strTempFolde ...

  10. 阅读笔记12-Java 面试题 —— 老田的蚂蚁金服面试经历

    电话一面 1.自我介绍.自己做的项目和技术领域 2.项目中的监控:那个监控指标常见的哪些? 3.微服务涉及到的技术以及需要注意的问题有哪些? 4.注册中心你了解了哪些? 5.consul 的可靠性你了 ...