<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>transform的 translate和rotate</title>

        <style type="text/css">

            #div1{

                height:200px;

                width: 200px;

                border:1px solid;

                transform: translate(100px,100px);

            }

            #div2{

                height: 100px;

                width: 100px;

                background: yellow;

                border:1px solid;

                transform: rotate(35deg);

                padding: 10px;

                transform-origin: % %;

                            }

        </style>

    </head>

    <body>

        <div id="div1">

            <div id="div2">Hello</div>

        </div>

    </body>

</html>

2D变形transform的translate和rotate的更多相关文章

  1. CSS3(3)---2D变形(transform)

    CSS3(3)---2D变形(transform) 2D变形是CSS3中具有颠覆性的特征之一,它常用的属性有:移动(translate).缩放(scale).旋转(rotate).倾斜 (skew). ...

  2. CSS3 2D变形 transform---移动 translate(x, y), 缩放 scale(x, y), 旋转 rotate(deg), transform-origin, 倾斜 skew(deg, deg)

    transform是CSS3中具有颠覆性的特征之一,可以实现元素的位移.旋转.倾斜.缩放,甚至支持矩阵方式,配合过渡和即将学习的动画知识,可以取代大量之前只能靠Flash才可以实现的效果. 变形转换 ...

  3. 深入理解CSS变形transform(2d)

    × 目录 [1]变形原点 [2]变形函数 [3]多值 前面的话 CSS变形transform是一些效果的集合,主要是移动.旋转.缩放和倾斜这四种基本操作,还可以通过设置matrix矩阵来实现更复杂的效 ...

  4. CSS变形transform(2d)

    前面的话 CSS变形transform是一些效果的集合,主要是移动.旋转.缩放和倾斜这四种基本操作,还可以通过设置matrix矩阵来实现更复杂的效果.变形transform可以实现2D和3D两种效果. ...

  5. 【CSS3练习】transform 2d变形实例练习

    transform 2d变形实例练习:练习了旋转 倾斜 缩放的功能 <!DOCTYPE html> <html lang="en"> <head> ...

  6. CSS3与页面布局学习笔记（六）——CSS3新特性（阴影、动画、渐变、变形( transform)、透明、伪元素等）

    一.阴影 1.1.文字阴影 text-shadow<length>①: 第1个长度值用来设置对象的阴影水平偏移值.可以为负值 <length>②: 第2个长度值用来设置对象的阴 ...

  7. CSS3的变形transform、过渡transition、动画animation学习

    学习CSS3动画animation得先了解一些关于变形transform.过渡transition的知识 这些新属性大多在新版浏览器得到了支持,有些需要添加浏览器前缀(-webkit-.-moz-.- ...

  8. CSS3——2D变形和3D变形

    2D变形(CSS3) transform transform是CSS3中具有颠覆性的特征之一,可以实现元素的位移.旋转.倾斜.缩放,甚至支持矩阵方式,配合过渡和即将学习的动画知识,可以取代大量之前只能 ...

  9. css3的2D变形

    一.2D变形 1.变形 transform:translate();translateX();translateY();translate(,); 2.过渡 transition:all 1s; 二. ...

随机推荐

  1. for 循环中的 i 变量问题

    1:如何点击每一个 li 的时候 alert 输出其index? <ul id="test"> <li>111</li> <li>2 ...

  2. 微信小程序初识

    http://lib.csdn.net/article/wechat/46742 微信小程序的前途和定位有什么疑惑?点进去 简单先记几个印象名词:流量入口,线下是重点,“即用即走”适合低频工具类产品. ...

  3. Jquery那些坑

    今天写Jquery的时候突然发现在将$("<td><td/>").appendTo(someElement)的时候发现一下子多出来两个,甚是奇怪,检查后端和 ...

  4. QPS/TPS简介

    系统吞度量要素 一个系统的吞度量(承压能力)与request对CPU的消耗.外部接口.IO等等紧密关联.单个reqeust 对CPU消耗越高,外部系统接口.IO影响速度越慢,系统吞吐能力越低,反之越高 ...

  5. 如何使用supervisor管理你的应用

    1.前言 Supervisor(http://supervisord.org/)是用Python开发的一个client/server服务,是UNIX-like系统下的一个进程管理工具,不支持Windo ...

  6. 硬件能力与智能AI-Zoomla!逐浪CMS2 x3.9.2正式发布

    北京时间2017年9月10日,领先的CMS网站内容管理系统与生产力软件研发厂商-Zoomla!逐浪CMS团队发布其年度重要产品:Zoomla!逐浪CMS2 x3.9.2,引领国内门户.移动.微商以及生 ...

  7. uva1343 IDA*

    这题需要用数组记录每个block的位置.启发函数:d+wa(8-当前最多相同个数)>maxd直接退出 AC代码: #include<cstdio> #include<cstri ...

  8. R实战 第三篇：数据处理

    在实际分析数据之前,必须对数据进行清理和转化,使数据符合相应的格式,提高数据的质量.数据处理通常包括增加新的变量.处理缺失值.类型转换.数据排序.数据集的合并和获取子集等. 一,增加新的变量 通常需要 ...

  9. Hibernate5环境搭建

      1.导包 Hibernate开发包   数据库的驱动包   2.核心配置文件   核心配置文件(赋值到src下) 1.核心配置文件 对于hibernate的核心配置文件它有两种方式(选其中一种即可 ...

  10. CDN中前端层的复制

    前端层的复制是为了提高静态内容分发的性能和可扩展性.将静态内容的分发转由边缘服务器来完成是为了解决可扩展性的问题,因为这样做可以避免出现在对等点和广域网链路处的网络拥堵风险,而这两个地方的拥堵是网络延 ...