<!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. hibernate之实体@onetomany和@manytoone双向注解（转）

    下面是User类: @onetomany @Entity @Table(name="user") public class User implements Serializable ...

  2. Bootstrap表单验证

    主要用过两个: jqBootstrapValidation: https://github.com/ReactiveRaven/jqBootstrapValidation bootstrapValid ...

  3. 长整形的使用及cin加速

    _int64 和 long long 那么对ACMer来说,最为关心的就是在各个OJ上交题应分别使用哪种方式了.其实方式只有有限的几种: 如果服务器是linux系统,那么定义用long long,IO ...

  4. 情景linux--如何解决read命令产生的硬编码问题

    情景 我们知道,read命令可以读取文件内容,并把内容赋值给变量. 以如下的数据文件为例. $ cat data.txt 1 201623210021 wangzhiguo 25 2 20162321 ...

  5. 运行web项目端口占用问题

    ---恢复内容开始--- 有时候运行web项目会提示8080端口已经被占用这一类问题(Error running Tomcat8: Address localhost:1099 is already ...

  6. 快了快了，你的 MacBook Pro 和 FineUICore！

    着玻璃窗,看到星巴克里那帮人拿着MacBook喝咖啡,你是不是要默念一遍:这帮傻叉,就爱装逼! 不过话说回来,你想不想尝试下这个傻叉的感觉? 是时候了,给自己一个理由,拥有自己的 MacBook Pr ...

  7. MySQL Crash Errcode: 28 - No space left on device

    一台MySQL服务器突然Crash了,检查进程 ps -ef | grep -i mysql 发现mysqld进程已经没有了, 检查错误日志时发现MySQL确实Crash了.具体如下所示: 注意日志中 ...

  8. Linux Framebuffer驱动剖析之二—驱动框架、接口实现和使用

    深入分析LinuxFramebuffer子系统的驱动框架.接口实现和使用. 一.LinuxFramebuffer的软件需求 上一篇文章详细阐述了LinuxFramebuffer的软件需求(请先理解第一 ...

  9. Trump就职演说

    美东时间1月20日,特朗普在美国国会大厦宣誓就职,正式成为第45任美国总统.特朗普在就职演说中说,"我们曾经致力于保卫其他国家的领地,却忽略了我们自己的领土.我们曾经将成千上万亿美元转移到海 ...

  10. freemarker嵌入文件输出结果

    freemarker嵌入文件输出结果 1.嵌入的文件代码 inc.ftl: <#assign username="李思思"> 2.父文件代码 inner.ftl: &l ...