1.transfrom:rotate(360deg); 用前要加transition: 2s;                      deg重点

transform:rotate(angle);
正值:顺时针旋转 rotate(360deg)
负值:逆时针旋转 rotate(-360deg)
只能设单值。正数表示顺时针旋转，负数表示逆时针旋转

transform: rotate(360deg);
<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            #test{

                width: 200px;

                height: 200px;

                border:3px solid red;

                background: pink;

                text-align: center;

                font: 20px/200px "微软雅黑" ;

                position: absolute;

                left: ;

                right: ;

                bottom: ;

                top: ;

                margin: auto;

              transition: 2s;

            }

            html{

                height: %;

            }

            html body{

                  height: %;

                  border: 3px solid yellow;

                  margin-top: 100px;

            }

            body:hover #test{

                transform: rotate(360deg);

            }

        </style>

    </head>

    <body>

        <div id="test">

        transform

        </div>

    </body>

</html>

tansation：rotate

X方向平移:transform: translateX(tx)
Y方向平移:transform: translateY(ty)
二维平移：transform: translate(tx[, ty])； 如果ty没有指定，它的值默认为0。

可设单值，也可设双值。
正数表示XY轴正向位移，负数为反向位移。设单值表示只X轴位移，Y轴坐标不变，
例如transform: translate(100px);等价于transform: translate(100px,0);

transform:translateX(300px);
<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            #test{

                width: 200px;

                height: 200px;

                border:3px solid red;

                background: pink;

                text-align: center;

                font: 15px/200px "微软雅黑" ;

                position: absolute;

                left: ;

                right: ;

                bottom: ;

                top: ;

                margin: auto;

              transition: 2s;

            }

            html{

                height: %;

            }

            html body{

                  height: %;

                  border: 3px solid yellow;

                  margin-top: 100px;

            }

            body:hover #test{

                transform:translateX(300px);

            }

        </style>

    </head>

    <body>

        <div id="test">

        transform:translateX(300px);

        </div>

    </body>

</html>

tranlateX

倾斜 skew

X方向倾斜:transform: skewX(angle)
skewX(45deg):参数值以deg为单位 代表与y轴之间的角度
Y方向倾斜:transform: skewY(angle)
skewY(45deg):参数值以deg为单位 代表与x轴之间的角度
二维倾斜:transform: skew(ax[, ay]); 如果ay未提供，在Y轴上没有倾斜
skew(45deg,15deg):参数值以deg为单位 第一个参数代表与y轴之间的角度
第二个参数代表与x轴之间的角度
单值时表示只X轴扭曲，Y轴不变，如transform: skew(30deg);等价于 transform: skew(30deg, 0);
考虑到可读性，不推荐用单值，应该用transform: skewX(30deg);。skewY表示 只Y轴扭曲，X轴不变

正值:拉正斜杠方向的两个角
负值:拉反斜杠方向的两个角

transform:skewX(45deg);
<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            #test{

                width: 200px;

                height: 200px;

                border:3px solid red;

                background: pink;

                text-align: center;

                font: 15px/200px "微软雅黑" ;

                position: absolute;

                left: ;

                right: ;

                bottom: ;

                top: ;

                margin: auto;

              transition: 2s;

            }

            html{

                height: %;

            }

            html body{

                  height: %;

                  border: 3px solid yellow;

                  margin-top: 100px;

            }

            body:hover #test{

                transform:skewX(45deg);

            }

        </style>

    </head>

    <body>

        <div id="test">

        transform:skewX(45deg);

        </div>

    </body>

</html>

Skew

缩放Scale

transform:scale(2);
X方向缩放:transform: scaleX(sx);
Y方向缩放:transform: scaleY(sy);
二维缩放 :transform: scale(sx[, sy]); (如果sy 未指定，默认认为和sx的值相同)

要缩小请设0.01～0.99之间的值，要放大请设超过1的值。
例如缩小一倍可以transform: scale(.5);
放大一倍可以transform: scale(2);

如果只想X轴缩放，可以用scaleX(.5)相当于scale(.5, 1)。
同理只想Y轴缩放，可以用scaleY(.5)相当于scale(1, .5)

正值:缩放的程度
负值:不推荐使用（有旋转效果）
单值时表示只X轴,Y轴上缩放粒度一样，如transform: scale(2);等价于transform: scale(2,2);

transform:scale();
<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            #test{

                width: 200px;

                height: 200px;

                border:3px solid red;

                background: pink;

                text-align: center;

                font: 15px/200px "微软雅黑" ;

                position: absolute;

                left: ;

                right: ;

                bottom: ;

                top: ;

                margin: auto;

              transition: 2s;

            }

            html{

                height: %;

            }

            html body{

                  height: %;

                  border: 3px solid yellow;

                  margin-top: 100px;

            }

            body:hover #test{

                transform:scale();

            }

        </style>

    </head>

    <body>

        <div id="test">

        transform:scale();

        </div>

    </body>

</html>

scale

基点的转换  transform-origin:left top;

  transform-origin: left top;
<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            #test{

                width: 200px;

                height: 200px;

                border:3px solid red;

                background: pink;

                text-align: center;

                font: 15px/100px "微软雅黑" ;

                position: absolute;

                left: ;

                right: ;

                bottom: ;

                top: ;

                margin: auto;

              transition: 2s;

              transform-origin: left top;

            }

            html{

                height: %;

            }

            html body{

                  height: %;

                  border: 3px solid yellow;

                  margin-top: 100px;

            }

            body:hover #test{

                transform:rotate(360DEG);

            }

        </style>

    </head>

    <body>

        <div id="test">

         transform-origin: left top;基点转换

        </div>

    </body>

</html>

transform-origin

css---2D变形的更多相关文章

  1. CSS 2D 转换

    通过CSS 2D转换,我们能够对元素进行移动.缩放.转动.拉长或拉伸. 2D转换一共五个属性:transfrom=> translate(X轴数值px,Y轴数值px):元素从其当前位置移动,根据 ...

  2. 【CSS3练习】transform 2d变形实例练习

    transform 2d变形实例练习:练习了旋转 倾斜 缩放的功能 <!DOCTYPE html> <html lang="en"> <head> ...

  3. CSS3——2D变形和3D变形

    2D变形(CSS3) transform transform是CSS3中具有颠覆性的特征之一,可以实现元素的位移.旋转.倾斜.缩放,甚至支持矩阵方式,配合过渡和即将学习的动画知识,可以取代大量之前只能 ...

  4. css3的2D变形

    一.2D变形 1.变形 transform:translate();translateX();translateY();translate(,); 2.过渡 transition:all 1s; 二. ...

  5. CSS3(3)---2D变形(transform)

    CSS3(3)---2D变形(transform) 2D变形是CSS3中具有颠覆性的特征之一,它常用的属性有:移动(translate).缩放(scale).旋转(rotate).倾斜 (skew). ...

  6. 1+X证书学习日志——css 2D&过渡

    css 位移常用属性 transform:translate(x,y): transform:translateX(); transform:translateY(); 旋转属性 2d旋转: tran ...

  7. css 2D转换 transform-rotate 画插图

    学习了一点2D转换,关于Transfrom-rotate的小用法 rotate()方法,在一个给定度数顺时针旋转的元素.负值是允许的,这样是元素逆时针旋转. 下面看实例 第一个例子是没有使用rotat ...

  8. css 2D转换总结

    CSS中2D转换的形式是这样的: 选择器{ transform:转换函数(参数,参数): } 其中transform(是transform 不是transfrom)定义元素的2D或者3D转换: 2D转 ...

  9. CSS 2D转换

    转换是使元素改变形状.尺寸和位置的一种效果.通过 CSS3 转换,我们能够对元素进行移动.缩放.转动.拉长或拉伸,可以大致分为2D转换和3D转换.下面介绍的是2D转换的相关知识点. 首先,CSS中2D ...

  10. css之变形（transform）

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. 将某个Qt4项目升级到Qt5遇到的问题

    本文转载自http://hi.baidu.com/xchinux/item/9044d8ce986accbb0d0a7b87 一.将某个QT4项目改成QT5遇到的问题 该Qt4项目以前是使用Qt4.7 ...

  2. 使用VBA达到vlookup效果

    Function Desc(ProdNum) Desc = Application.WorksheetFunction.VLookup(ProdNum, Range("myTable&quo ...

  3. SVM-SVR

    高频率的接触到了SVM模型,而且还有使用SVM模型做回归的情况,即SVR.另外考虑到自己从第一次知道这个模型到现在也差不多两年时间了,从最开始的腾云驾雾到现在有了一点直观的认识,花费了不少时间.因此在 ...

  4. 【POJ】1679 The Unique MST

    题目链接:http://poj.org/problem?id=1679 题意:给你一组数据,让你判断是否是唯一的最小生成树. 题解:这里用的是kuangbin大佬的次小生成树的模板.直接判断一下次小生 ...

  5. Tomcat爆破

    把输入的账户和密码包起来 选择第三个模式 第一个添加用户名 第二个添加: 第三个添加密码 选择编码格式 取消打钩

  6. 随笔记录 yum -y clean all出错解决方案

    出现以下问题的解决方案: 使用解决方案之前,要先确定一下几种情况: 1.检查光盘是否挂载 2.ISO映像文件是否使用正确 解决方案1: rm -rf /var/cache/yum/* yum repo ...

  7. 【学术篇】luogu3768 简单的数学题（纯口胡无代码）

    真是一道"简单"的数学题呢~ 反演题, 化式子. \[ ans=\sum_{i=1}^n\sum_{j=1}^nijgcd(i,j) \\ =\sum_{i=1}^n\sum_{j ...

  8. 微信公众号开发上传图文素材带有卡片小程序报错：errcode=45166,errmsg = invalid content hint

    微信公众号开发自从支持允许在群发图文中插入小程序,方便了小程序的运营及推广.最近在三方服务开发中,要支持图文素材插入小程序遇到了一个很是棘手的问题.官方给出的插入小程序的示例支持文字.图片.卡片.如下 ...

  9. JAVA去除抖音视频的水印源码！！！

    @PostMapping("geturl") public DataResponse decodeDouiyin(@RequestBody DouyinRequest req ) ...

  10. Python pillow库安装报错

    报错信息: D:\pythontest\duanxinhongzha>pip3 install pillowCollecting pillow Could not find a version ...