<!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. CentOS7 安装 Tomcat

    安装 JDK Tomcat 的安装依赖 JDK,在安装 Tomcat 之前需要先安装 Java JDK.输入命令 java -version,如果显示 JDK 版本,证明已经安装了 JDK java ...

  2. Mac下PyCharm快捷键大全

    Mac键盘符号和修饰键说明 ⌘ Command ⇧ Shift ⌥ Option ⌃ Control ↩︎ Return/Enter ⌫ Delete ⌦ 向前删除键(Fn+Delete) ↑ 上箭头 ...

  3. Java经典编程题50道之二十一

    求1+2!+3!+...+20!的和. public class Example21 {    public static void main(String[] args) {        sum( ...

  4. 利用Azure嵌套虚拟化，解决公有云上机器不能启动的问题

    很多时候我们都会碰到因为意外重启,机器硬盘被损坏导致无法启动,或者是因为各种原因Windows上的RDP服务启动不了,Linux上的SSH无法链接等等问题.碰到这种问题基本上很难解决以前都是将VHD下 ...

  5. java-redis初探

    一.Redis 简介 Redis 是完全开源免费的,遵守BSD协议,是一个高性能的key-value数据库. Redis 与其他 key - value 缓存产品有以下三个特点: Redis支持数据的 ...

  6. LOJ6000 - 「网络流 24 题」搭配飞行员

    原题链接 题意简述 求二分图的最大匹配. 题解 这里写的是匈牙利算法. 表示节点的当前匹配. 为真表示在这一轮匹配中,无法给节点一个新的匹配.所以如果为真就不用再dfs它了,直接continue就好. ...

  7. Jpa中设置OneToMany插入报异常解决办法

    在Jpa中如果设置@OneToMany,但使用的时候,如果没有赋值,会报异常出现,这时只需要实例化一个空数组即可, 但类型一定要对应: 实例如下: newField.setxxxxxList(new ...

  8. 阿里舆情︱舆情热词分析架构简述（Demo学习）

    本节来源于阿里云栖社区,同时正在开发一个舆情平台,其中他们发布了一篇他们所做的分析流程,感觉可以作为案例来学习.文章来源:觉民cloud/云栖社区 平台试用链接:https://prophet.dat ...

  9. 1.2 PCI总线的信号定义

    PCI总线是一条共享总线,在一条PCI总线上可以挂接多个PCI设备.这些PCI设备通过一系列信号与PCI总线相连,这些信号由地址/数据信号.控制信号.仲裁信号.中断信号等多种信号组成. PCI总线是一 ...

  10. ActiveMQ的运用

    MQ的消息队列模式有2种,一种是点对点模式,一种是订阅模式. 点对点模式:点对点的模式主要建立在一个队列上面,当连接一个列队的时候,发送端不需要知道接收端是否正在接收,可以直接向ActiveMQ发送消 ...