<!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. C++_编写动态链接库

    原文:http://blog.csdn.net/a7055117a/article/details/47733247 动态链接库简介 动态链接库(Dynamic Link Library 或者 Dyn ...

  2. JavaWeb基础—数据库连接池DBCP、C3P0

    一.基本概念 数据库连接池负责分配.管理和释放数据库连接 数据库连接池:(池用map来实现居多) 用处:为了可重用(销毁创建麻烦,开销大)(招培训老师的例子) 二.编写实现数据库连接池 池参数: 初识 ...

  3. 《Java 程序设计》课堂实践项目汇总链接

    1.<Java 程序设计>课堂实践项目-命令行参数 2.<Java 程序设计>课堂实践项目-mini dc 3.<Java 程序设计>课堂实践项目-Arrays和S ...

  4. switch...case 语句

    var a = 6;switch(a){ case 1:   alert("1111");   break; case 2:   alert("2222");  ...

  5. 【转载】Free Lunch is Over(免费午餐已经结束了)

    原文:Free Lunch is Over(免费午餐已经结束了) 微软C++大师Herb Sutter的文章<The Free Lunch Is Over>翻译,以前自己也经常翻译,但是都 ...

  6. 一维码Code 93简介及其解码实现(zxing-cpp)

    一维码Code 93: Code 93码与Code 39码的字符集相同,但93码的密度要比39码高,因而在面积不足的情况下,可以用93码代替39码.它没有自校验功能,为了确保数据安全性,采用了双校验字 ...

  7. restful_framework之视图组件

    一.基本视图 写一个出版社的增删查改resful接口 要自己事先创建好django项目,并创建好表,添加完记录 路由: url(r'^publish/$', views.PublishView.as_ ...

  8. 经典简约风格教师求职简历免费word模板

    20款经典简约风格教师求职简历免费word模板,也可用于其他专业和职业,个人免费简历模板,个人简历表免费,个人简历表格. 声明:该简历模板仅用于个人欣赏使用,请勿用于商业用途,谢谢. 下载地址:百度网 ...

  9. c++引用与指针的关系

    目录 1.引用的概念及用法 2.引用做参数 3.引用做返回值 4.汇编层看引用的特性 5.引用和指针的区别和联系: 更多内容请移步专栏:https://blog.csdn.net/column/det ...

  10. 简单字典实现（KV问题）

    搜索二叉树基本概念请看上篇博客 这两个问题都是典型的K(key)V(value)问题,我们用KV算法解决. 判断一个单词是否拼写正确:假设把所有单词都按照搜索树的性质插入到搜索二叉树中,我们判断一个单 ...