<!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. jslint

    auto execution/self execution/ Immediate function http://www.jslint.com/ (function () { 'use strict' ...

  2. 【LG3240】[HNOI2015]实验比较

    题面 洛谷 题解 30pts 爆搜即可. 100pts 题意描述里有一句:"对每张图片\(i\),小\(D\)都最多只记住了某一张质量不比\(i\)差的另一张图片\(K_i\)." ...

  3. Git的原理简介和常用命令

    Git和SVN是我们最常用的版本控制系(Version Control System, VCS),当然,除了这二者之外还有许多其他的VCS,例如早期的CVS等.顾名思义,版本控制系统主要就是控制.协调 ...

  4. mtr语言真是逆天了

    实践证明,设计一个语言,还不是简单的解释没一行哦

  5. Spring学习(十四)----- Spring Auto Scanning Components —— 自动扫描组件

    一.      Spring Auto Scanning Components —— 自动扫描组件 1.      Declares Components Manually——手动配置componen ...

  6. [Unity Shader] 常用的数值类型和语义

    书看到第八章,跟随写了一些例子,但有些数值类型的使用还是需要特别注意,经常需要查阅,在这里做一下总结. 1 ShaderLab属性类型和Cg变量类型的匹配关系 Color.Vector:float4, ...

  7. 【SIKIA计划】_07_Unity3D游戏开发-坦克大战笔记

    [新增分类][AudioClips]音频剪辑[AudioMixers]音频混合器[Editor][Fonts]字体[Materials]材质[Models]模型[Standard Assets] [渲 ...

  8. Tensorflow张量的形状表示方法

    对输入或输出而言: 一个张量的形状为a x b x c x d,实际写出这个张量时: 最外层括号[…]表示这个是一个张量,无别的意义! 次外层括号有a个,表示这个张量里有a个样本 再往内的括号有b个, ...

  9. 为 GlusterFS 设计新的xlator (编译及调用过程分析)

    GlusterFS 是一个开源的网络分布式文件系统,前一阵子看了一点GlusterFS(Gluster)的代码,修改了部分代码,具体是增加了一个定制的xlator,简单记录一下. Gluster与xl ...

  10. LVS 负载均衡 keepalive

    为什么要学lvs 工作在网络模型的7层,可以针对http应用做一些分流的策略,比如针对域名.目录结构, Nginx单凭这点可利用的场合就远多于LVS了.最新版本的Nginx也支持4层TCP负载,曾经这 ...