transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

用法：object.style.transform="rotate(7deg)"

1、旋转： rotate(30deg);（顺时针旋转30°）

2、2D移动：translate(x,y)（右移到x，下移到y）

3、3D移动：translate3d(x,y,z)

4、横向移动：translateX(x)（横向移动到x）

5、竖向移动：translateY(y)（竖向移动到y）

6、缩放：scale(x,y)（以元素中心为中心，横向放大x倍，竖向放大y倍）

7、横向缩放：scaleX(2)（横向放大2倍）

8、竖向缩放：scaleY(5)（竖向放大5倍）

详情及效果参考： http://www.w3school.com.cn/cssref/pr_transform.asp

css-移动&缩放元素的更多相关文章

  1. 浅谈css的伪元素::after和::before

    css中的::after和::before已经被大量地使用在我们日常开发中了,使用他们可以使我们的文档结构更加简洁.但是很多人对::after和::before仍不是特别了解,究竟他们是做什么的?如何 ...

  2. 用 CSS 隐藏页面元素

    用 CSS 隐藏页面元素有许多种方法.你可以将 opacity 设为 0 将 visibility 设为 hidden 将 display 设为 none 将 position 设为 absolute ...

  3. HTML和CSS设置动态导航以及CSS中伪元素的简单说明

    HTML页面代码: <!DOCTYPE html> <html> <head> <title>Test</title> <meta c ...

  4. CSS的伪元素（二）

    随便聊聊CSS的伪元素,虽然它们在项目开发中用的并不多,但确实很有用,在项目中不用它,是因为大家不能了解它们,下面是一个工作场景,如有四个按钮,分别是建立,编辑,删除和修改,而我们要求这在前台显示的汉 ...

  5. css的伪元素

    这里想将的是两个伪元素,一个是:first-line——用来向文本的首行添加特殊样式,并且不论该行出现多少单词:只能与块状元素关联. 如下属性可以应用于:first-line伪元素 font属性 co ...

  6. 用 CSS 隐藏页面元素的 5 种方法

    原文链接:用 CSS 隐藏页面元素的 5 种方法,转载请注明来源! 用 CSS 隐藏页面元素有许多种方法.你可以将 opacity 设为 0.将 visibility 设为 hidden.将 disp ...

  7. [CSS]利用伪元素实现一些特殊图形

    给定的html代码是: <div class='square'></div> 平常实现我们常是通过添加小的icon来实现,不仅需要添加图片资源,还需要改动html结构. CSS ...

  8. CSS Clip剪切元素动画实例

    1.CSS .fixed { position: fixed; width: 90px; height: 90px; background: red; border: 0px solid blue; ...

  9. css float父元素高度塌陷

    css float父元素高度塌陷 float 使父元素高度塌陷不是BUG,反而是标准. float 原本是为了解决文字环绕才出现的. 当然有的时候要解决高度塌陷的问题 以下几个方法可以解决float ...

  10. CSS实现父元素半透明，子元素不透明

    CSS实现父元素半透明,子元素不透明. 很久以来大家都习惯使用opacity:0.5在新式浏览器里实现半透明,而对IE较旧的版本使用filter:Alpha(opacity=0.5)的滤镜来实现半透明 ...

随机推荐

  1. 【bzo1579】拆点+dijkstra优先队列优化+其他优化

    题意: n个点,m条边,问从1走到n的最短路,其中有K次机会可以让一条路的权值变成0.1≤N≤10000;1≤M≤500000;1≤K≤20 题解: 拆点,一个点拆成K个,分别表示到了这个点时还有多少 ...

  2. 洛谷P3764 签到题 III

    题目背景 pj组选手zzq近日学会了求最大公约数的辗转相除法. 题目描述 类比辗转相除法,zzq定义了一个奇怪的函数: typedef long long ll; ll f(ll a,ll b) { ...

  3. 【51NOD】数字1的数量

    [算法]数位DP [题解]数位dp总结 之 从入门到模板 #include<cstdio> #include<algorithm> #include<cstring> ...

  4. MSSQL 数据库性能优化

    优化数据库的注意事项: 1.关键字段建立索引. 2.使用存储过程,它使SQL变得更加灵活和高效. 3.备份数据库和清除垃圾数据. 4.SQL语句语法的优化. 5.清理删除日志. SQL语句优化的基本原 ...

  5. 命令行创建KVM虚拟机

    qemu命令创建虚拟机: qemu-img create -f qcow2 /home/ubuntu.img 20G   qemu-system-x86_64 -m 2048 -enable-kvm ...

  6. edittext 的一个案例

        <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android= ...

  7. POJ 1456 Supermarket（贪心+并查集）

    题目链接:http://poj.org/problem?id=1456 题目大意:有n件商品,每件商品都有它的价值和截止售卖日期(超过这个日期就不能再卖了).卖一件商品消耗一个单位时间,售卖顺序是可以 ...

  8. 深入理解python多进程编程

    1.python多进程编程背景 python中的多进程最大的好处就是充分利用多核cpu的资源,不像python中的多线程,受制于GIL的限制,从而只能进行cpu分配,在python的多进程中,适合于所 ...

  9. rabbitmq在centos7下安装

    知识预览 一. RabbitMQ队列 二. 事例 三.基于RabbitMQ的RPC 回到顶部 一. RabbitMQ队列 ? 1 2 3 4 5 #消息中间件 -消息队列   - 异步 提交的任务不需 ...

  10. hdu 3367(与最大生成树无关。无关。无关。重要的事情说三遍+kruskal变形)

    Pseudoforest Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Tot ...