<!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. JavaWeb基础—监听器Listener

    javaWeb三大组件: servlet listener(用的不多) filter 什么叫监听器: 初次相见:AWT 二次相见:SAX(XML解析时)Bundle 绑定 监听器是一个接口,内容由我们 ...

  2. Advanced Find and Replace(文件内容搜索替换工具)v7.8.1简体中文破解版

    Advanced Find and Replace是一款文件内容搜索工具,同时也是文件内容批量替换工具.支持通配符和正则表达式,方便快捷强大! 显示中文的方法:第二个菜单-Language-选 下载地 ...

  3. swt TableViewer

    http://blog.163.com/bluefield_wild/blog/static/8182709520085612235336/ package list; import java.uti ...

  4. Linux tree 命令乱码

    今天在执行Linux下的tree命令的时候,出现了乱码.上网查了一下说需要使用tree --charset ASCII,强制使用ASCII字符.这样确实可以输出正常了.但是我的环境里的LANG=US. ...

  5. ~ManancherQwQ

    例题传送门 好久没写博客了,写一发. 之前学的Manacher算法拿到模板题找到那最后一个点的错误了,TMD没开long long. Manachar算法主要是处理字符串中关于回文串的问题的,它可以在 ...

  6. 2-7 hash

    1.Hash Hash函数处理流程Hash,一般翻译做"散列",也有直接音译为"哈希"的,就是把任意长度的输入(又叫做预映射, pre-image),通过散列算 ...

  7. doc2vec使用笔记

    #!/usr/bin/env Python # coding:utf-8 #improt依赖包 # import sys # reload(sys) # sys.setdefaultencoding( ...

  8. Spring3升级到Spring4时， 运行时出现找不到MappingJacksonHttpMessageConverter的情况

    [org.springframework.web.context.ContextLoader]Context initialization failed org.springframework.bea ...

  9. 关于Mybatis的Example(and ,or )应用

    近期的一个项目中遇到Mybatis的Example的and or 的应用,感觉有必要记录一下(个人见解,有问题请指出.谢谢) 1.在Example中的每一个Criteria相当于一个括号,把里面的内容 ...

  10. [webpack]--webpack 如何解析代码模块路径

    前言 webpack是如何解析代码模块路径 webpack 中有一个很关键的模块 enhanced-resolve 就是处理依赖模块路径的解析的,这个模块可以说是 Node.js 那一套模块路径解析的 ...