<!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. Python基本格式化输出

    什么叫格式化输出? 数据按照某种特殊的要求输出 假如输入一个整数,希望整数按照十六进制,八进制输出,如果输入一个小数,希望小数保留后面2位数然后输出,或者以科学计数法的方式来输出小数.字符串的输出希望 ...

  2. python爬取快手视频 多线程下载

    就是为了兴趣才搞的这个,ok 废话不多说 直接开始. 环境: python 2.7 + win10 工具:fiddler postman 安卓模拟器 首先,打开fiddler,fiddler作为htt ...

  3. Linux下 开启防火墙端口

    命令行输入: vi /etc/sysconfig/iptables 将 -A INPUT -m state --state NEW -m tcp -p tcp --dport 端口号 -j ACCEP ...

  4. C#中引用变量是否应该加ref？

    看如下代码:   void Test(T t); void Test(ref T t); 当T是值类型的时候,很好判断,第一种并不能改变方法外变量的值,需要第二种方法才可以.通过查看IL代码,可以看到 ...

  5. IM开发基础知识补课：正确理解前置HTTP SSO单点登陆接口的原理

    1.前言 一个安全的信息系统,合法身份检查是必须环节.尤其IM这种以“人”为中心的社交体系,身份认证更是必不可少. 一些PC时代小型IM系统中,身份认证可能直接做到长连接中(也就是整个IM系统都是以长 ...

  6. jdbc 报错解决办法

    刚刚看到一个童鞋出现了这个问题 其实这个问题很好解决 在工程中创建一个lib目录: 然后讲mysql包复制进去 然后对着包点击右键 build path就可以了 最后面再次运行就可以了 jar包地址下 ...

  7. 54.1 怎样才算学会django？ 知道这28个知识点才算会django2

    学到什么程度才算会django了?这篇文章帮你梳理一下 关于django2的28个不可不知的知识点总结: 1.cookie操作: -客户端本地存储的键值对 2.session操作: -服务器端可以保存 ...

  8. Supervisor使用说明

    Supervisor是一个 Python 开发的 client/server 系统,可以管理和监控类 UNIX 操作系统上面的进程.它可以同时启动,关闭多个进程,使用起来特别的方便. 1.组成部分 s ...

  9. php 递归无线级别分类

    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <?ph ...

  10. mpeg文件格式分析

    MPEG-1流比特层次结构分析总结 1．简要介绍Mpeg 2．Mpeg-1数据流分析 2.1视频序列层(VideoStream) 2.2画面组层(GOP) 2.3画面层(Pictures) 2.4片层 ...