<!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. 可变多隐层神经网络的python实现

    说明:这是我对网上代码的改写版本,目的是使它跟前一篇提到的使用方法尽量一致,用起来更直观些. 此神经网络有两个特点: 1.灵活性 非常灵活,隐藏层的数目是可以设置的,隐藏层的激活函数也是可以设置的 2 ...

  2. 【FJOI2014】最短路径树问题

    题面 题解 强行将最短路和点分治(长链剖分)融合在一起的题目 构建出字典序最小的最短路树之后,就可以用点分治来解决了 不过有一些细节要注意: 3 3 k 1 2 1 2 3 1 1 3 2 这样建出的 ...

  3. 2991:2011 求2011^n的后四位。

    2991:2011 查看 提交 统计 提问 总时间限制:  1000ms 内存限制:  65536kB 描述 已知长度最大为200位的正整数n,请求出2011^n的后四位. 输入 第一行为一个正整数k ...

  4. .net core中automapper的使用

    automapper 是将两个类中的相同字段进行映射,也可以指定字段进行映射:将 UserDao的id 映射为 User 的age CreateMap<UserDao, User>() . ...

  5. socket客户端和服务器端

    服务器端: #!/usr/bin/env python #-*- coding:utf-8 -*- import socket sk=socket.socket() sk.bind(('127.0.0 ...

  6. 使用终端命令行将本地项目上传到Github

    使用终端命令行将本地项目上传到Github 转自https://blog.csdn.net/fishball1/article/details/52020305 对于IOS开发者来说,Github的使 ...

  7. javascript中的toString()方法

    javascript中的toString()方法,主要用于Array.Boolean.Date.Error.Function.Number等对象.下面是这些方法的一些解析和简单应用,做个纪律,以作备忘 ...

  8. 大学生Linux常用命令（一）

    大学生Linux常用命令(一) 1.1 命令格式 命令格式一般为---命令名 [选项] [参数1] [参数2]- 例如:cp -I file1 cp为命令名,-l为选项,file1为参数. 其中,命令 ...

  9. 高可用OpenStack（Queen版）集群-14.Openstack集成Ceph准备

    参考文档: Install-guide:https://docs.openstack.org/install-guide/ OpenStack High Availability Guide:http ...

  10. Go单元测试注意事项及测试单个方法和整个文件的命令

    Go程序开发过程中免不了要对所写的单个业务方法进行单元测试,Go提供了 "testing" 包可以实现单元测试用例的编写,不过想要正确编写单元测试需要注意以下三点: Go文件名必须 ...