移动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. linux 文件相关常用命令

    文件或者目录操控命令 1,cd切换目录. 其中- 代表前一个目录 2,mkdir 新建目录. 加上-p参数可以递归创建多级目录 mkdir -p test1/test2/test3 3,rmdir删除 ...

  2. uva live 7637 Balanced String （贪心）

    题目链接:https://icpcarchive.ecs.baylor.edu/index.php?option=com_onlinejudge&Itemid=8&page=show_ ...

  3. jni中arm64-v8a，armeabi-v7a,armeabi文件夹的意义和用法<转>

    jni中arm64-v8a,armeabi-v7a,armeabi文件夹的意义和用法 起因 之前并没有关注这块,直到:您的应用被拒绝,原因:xplay5sQ心里点击笑值点击拍照显示停止运行,查看发过来 ...

  4. React Native商城项目实战09 - 个人中心自定义cell

    1.新建组件CommonMyCell.js /** * 个人中心自定义cell */ import React, { Component } from 'react'; import { AppReg ...

  5. 【cs231n作业笔记】一：KNN分类器

    安装anaconda,下载assignment作业代码 作业代码数据集等2018版基于python3.6 下载提取码4put 本课程内容参考: cs231n官方笔记地址 贺完结!CS231n官方笔记授 ...

  6. 用Vue来实现音乐播放器（二十）：Vuex初始化及歌手数据的配置

    state:所有组件的所有状态和数据  放入同一个内存空间去管理 我们把它称为state Vue Components:state里面的数据可以方便的映射到组件上 然后渲染组件 Actions:当组件 ...

  7. 5分钟连续出现某现象+微信模板消息提醒 PHP

    需求场景:用电插座电流连续出现5次电流过高(大于 3A)后停止用电服务,前四次发送电流过高提醒,最后一次发送结束用电服务提醒 思路: Redis  key 设为:插座编号+user户编号  value ...

  8. 解决sql语句中参数为空（null）不会更新参数的问题

    用的mybatis自动生成的 情景: 修改页面中,修改某个字段,修改前有数据,修改后为空. mybatis中一般用到 如:(这种直接忽略为空的字段,不能更新空字段参数) <update id=& ...

  9. StringBuffer 和Stringbuilder源码分析

    首先看一下他们的继承关系   这个两个对象都继承了AbstractStringBuilder抽象类.   1.他们的实现方式都一样的,唯一区别的StringBuffer在多线程的时候是保证了数据安全, ...

  10. C++ 全面刨析使用指针方法 _new _delete

    指针 #include<iostream> using namespace std; int main() { ; int* pn;//声明 int* pn = &avr;//初始 ...