<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <style type="text/css">

        *{

            padding: 0;

            margin: 0;

        }

        html{

            height: 100%;

            overflow: hidden;

        }

        body{

            height: 60%;

            width: 60%;

            border: 1px solid;

            margin: 100px auto;

            overflow: hidden;

        }

        #test{

            height: 200px;

            width: 200px;

            border-radius: 50%;

            border: 1px solid;

            position: absolute;

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

            text-align: center;

            top: 0;

            left: 0;

            right: 0;

            bottom: 0;

            margin: auto;

        }

        body:hover #test{

            /*transform: translate(300px,300px);*/

            /*transform: scaleX(1.5);*/

            transform: rotate(130deg);

        }

        /*

         1、translate(x,y):

         左右移动，单位是px,有两个值，

         x，y  表示左/右，上/下

         一个值的时候表示x值,

         transform: translate(300px,300px);

         表示右下方向移动

         translateX(x) 定义X轴的

         translateY(y)定义Y轴的

         2、scale(x,y) 定义2D缩放转换

         无单位，数字表示，数字代表缩放多少倍

         如果只填一个值的时候，代表了x和y值一样，赋予了两个值

         transform: scaleX(1.5) 代表X和Y都是放大1.5倍，如果要缩小，则改为负数

         scaleX(x) 代表通过设置 X 轴的值来定义缩放转换  缩放X轴的转换

         scaleY(y) 通过设置 Y 轴的值来定义缩放转换。 缩放Y轴的转换

         3、rotate(angle) 定义 2D 旋转，在参数中规定角度。

         rotate(<a> [<x> <y>])变换函数指定由旋转a给定旋转度数

         如果可选参数x，并y没有提供，则旋转是当前用户的坐标系的原点（就是中心点）。

         如果可选参数x和y提供的，该旋转是关于点(x, y)。

         4、skew(x-angle,y-angle)定义沿着 X 和 Y 轴的 2D 倾斜转换。

         skewX(angle) 定义沿着 X 轴的 2D 倾斜转换。

         skewY(angle) 定义沿着 Y 轴的 2D 倾斜转换。
　　　　　　注意：
　　　　　变换组合时，计算方向是从右往左进行继续的（这时候是用矩阵去计算的）

         * */

    </style>

    <body>

        <div id="test">

            Rainbow

        </div>

    </body>

</html>

2D变换的更多相关文章

  1. css3 过渡和2d变换——回顾

    1.transition 语法:transition: property duration timing-function delay; transition-property 设置过渡效果的css ...

  2. 2017/11/25 2D变换

    2D变换 一.盒模型解析模式 1.box-sizing:盒模型解析模式 1)content-box:标准盒模型(和css2一样的计算) 宽度和高度之外绘制元素的内边距和边框 width,height外 ...

  3. 背水一战 Windows 10 (71) - 控件（控件基类）: UIElement - RenderTransform（2D变换）, Clip（剪裁）

    [源码下载] 背水一战 Windows 10 (71) - 控件(控件基类): UIElement - RenderTransform(2D变换), Clip(剪裁) 作者:webabcd 介绍背水一 ...

  4. IT兄弟连 HTML5教程 CSS3属性特效 2D变换1

    通过CSS3转换,能够对元素进行移动.缩放.转动.拉长或拉伸.它如何工作?转换是使元素改变形状.尺寸和位置的一种效果.CSS3转换包括2D转换和3D转换,本小结我们来了解2D变换的转换方法. 转换属性 ...

  5. CSS3 2D 变换

    CSS2D transform 表示2D变换,目前获得了各主流浏览器的支持,是CSS3中具有颠覆性的特征之一,可以实现元素的位移.旋转.倾斜.缩放,甚至支持矩阵方式,可以取代大量之前只能靠Flash才 ...

  6. css3的transform ，2D变换

    transformtransform的中文翻译就是变换,改变,改观,转换的意思 在css中的主要作用就是对一个div或元素进行样式的改变. 他的属性(变换方式)有:平移,旋转,缩放,扭曲transla ...

  7. CSS3之过渡及2D变换

    transition过渡 transition-duration:; 运动时间 transition-delay:; 延迟时间 transition-timing-function:; 运动形式 ea ...

  8. 关于CSS3的小知识点之2D变换

        transition过渡 transition-duration:; 运动时间 transition-delay:; 延迟时间 transition-timing-function:; 运动形 ...

  9. css3 -- 2D变换

    1.transform 1 E{ 2 -moz-transform:function(value): 3 -ms-transform:function(value): 4 -o-transform:f ...

随机推荐

  1. sqlplus 中 各列对齐设定

    设置列标题的对齐方式 JUSTFIFY  {L[EFT]|C[ENTER]|R[IGHT]} SQL> col ename justify center SQL> /

  2. PCA人脸识别的python实现

    这几天看了看PCA及其人脸识别的流程,并在网络上搜相应的python代码,有,但代码质量不好,于是自己就重新写了下,对于att_faces数据集的识别率能达到92.5%~98.0%(40种类型,每种随 ...

  3. metasploit-端口扫描

    大体可以分为两种方式: 1.调用nmap进行端口扫描 msfconsole nmap -v -sV www.cstc.org.cn 扫描结果(端口开放情况以及目标服务操作系统相关操作信息) PORT ...

  4. Performance Monitor2：性能计数器

    性能计数器(Performance Counter)是量化系统状态或活动的一个数值,Windows Performance Monitor在一定时间间隔内(默认的取样间隔是15s)获取Performa ...

  5. Flutter - 下载别人的Flutter项目，本地编译不过

    如果直接下载了别人的Flutter项目,点击运行基本会不通过的,这是gradle版本差异造成的. 你需要修改android/gradle/wrapper/gradle-wrapper.properti ...

  6. （转载）jquery实现全选、反选、获得所有选中的checkbox

    举了7个不同的checkbox状态,和大家一一分享. 1.全选 $("#btn1").click(function(){ $("input[name='checkbox' ...

  7. netsh常用命令

    netsh常用命令 0.netsh介绍 netsh(Network Shell)是一个windows系统本身提供的功能强大的网络配置命令行工具 1.修改IP地址addr和子网掩码mask netsh ...

  8. 微服务构建： Spring Boot

    在展开 Spring Cloud 的微服务架构部署之前, 我们先了解一下用于构建微服务的基础框架-Spring Boot. 由于 Spring Cloud 的构建基于 Spring Boot 实现, ...

  9. C++可继承的单例基类模板

    目录 一.介绍 二.代码 三.关键处 五.参考资料 一.介绍 最近在写一个项目,其中用到好几个单例,类本身的设计不是很复杂,但是如果每个都写一遍单例又觉得有点冗余:所以查资料写了一个单例基类模板,只要 ...

  10. 《Pro SQL Server Internals, 2nd edition》的CHAPTER 1 Data Storage Internals中的Data Pages and Data Rows(翻译)

    数据页和数据行 数据库中的空间被划分为逻辑8KB的页面.这些页面是以0开始的连续编号,并且可以通过指定文件ID和页号来引用它们.页面编号都是连续的,这样当SQL Server增长数据库文件时,从文件中 ...