转换属性 transform

  转换是css3中的一个特征,可以实现元素的缩放,位移,变形。
作用:
使元素在位置或者形状上发生一定的改变。
属性:
transform
属性值:
scale:缩放(一般)
translate 位移(重点)
rotate 旋转(重点)
skew 倾斜(了解)

1.scale 缩放

  格式:  transform:scale(x,y)
x:表示水平方向上的缩放倍数
y:表示垂直方向上的缩放倍数 如果只写一个值表示等比例缩放。 【注意】
1.缩放只是一种视觉效果,不会对别的盒子造成影响。
2.取值大于1表示放大,小于1表示缩小。
示例

.box { width: 100px; height: 100px; background-color: rgba(255, 103, 0, 1); margin: 0 auto; transition: transform 1s }
.box:nth-child(0n+1) { margin-top: 100px; border: 1px solid }
.box:hover { transform: scale(2) }

2.位移:translate

  格式:
transform:translate(水平位移量,垂直位移量) 取值:水平位移量为正,向右移动,垂直方向的正方形为下。 只写一个值,表示水平位移量。 参数为百分比的话,是相对于自身的宽高。 位移只是一种视觉效果,不会对别的盒子造成影响。
示例

.box1 { width: 100px; height: 100px; float: left; transition: transform 1s; background-color: rgba(255, 103, 0, 1) }
.box1:hover { transform: translateX(150px) }
.box2 { width: 100px; height: 100px; float: left; background-color: rgba(46, 204, 113, 1) }

3旋转:rotate

  格式:transform:rotate(角度(deg))
单位:deg,正值:顺时针,负值:逆时针。
示例

.box3 { width: 300px; height: 300px; background-color: rgba(255, 103, 0, 1); margin: 100px auto; transition: transform 1s linear }
.box3:hover { transform: rotate(45deg) }

转换原点origin

transform-origin:水平坐标,垂直坐标。

  取值:
px 单词
center left top right bottom
示例

.box4 { width: 300px; height: 300px; background-color: rgba(255, 103, 0, 1); margin: 100px auto; transition: transform 2s linear; transform-origin: bottom }
.box4:hover { transform: rotate(60deg) }

4 倾斜:skew(不常用)

格式:
transform:skew(水平倾斜角度,垂直倾斜角度)
单位:deg 正值:顺指针 负值:逆时针
两个角度相交,不要大于等于90deg.
示例

.box5 { width: 100px; height: 100px; background-color: rgba(20, 100, 88, 1); margin: 100px auto; transition: transform 1s linear }
.box5:hover { }

注意点

  1.转换操作不会影响到其他元素
2.只能添加给块元素,不能添加给行内元素。
3.同时添加多个变形操作,先执行前面的,再执行后面的。
4.多个变形操作必须写在一个transform属性后面,书写多次transform属性时,后面的会层叠掉前面的。

缩放 transform的更多相关文章

  1. 在CSS3中,可以利用transform功能来实现文字或图像的旋转、缩放、倾斜、移动这四种类型的变形处理

    CSS3中的变形处理(transform)属 transform的功能分类 1.旋转 transform:rotate(45deg); 该语句使div元素顺时针旋转45度.deg是CSS 3的“Val ...

  2. css010 css的transform transition和animation

    css010 css的transform transition和animation 看着没有一个能想起他们是干什么的.. 1.         Transform    Transform(变形) r ...

  3. 图层的transform属性

    Main.storyboard // //  ViewController.m //  7A11.图层的transform属性 // //  Created by huan on 16/2/4. // ...

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

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

  5. css笔记——区分css3中的transform transition animation

    出处:http://blog.csdn.net/dyllove98/article/details/8957232   CSS3中和动画有关的属性有三个  transform. transition  ...

  6. CSS3中动画属性transform、transition 和 animation

    CSS3中和动画有关的属性有三个 transform.transition 和 animation.下面来一一说明:        transform   从字面来看transform的释义为改变,使 ...

  7. Unity 触屏缩放模型

    现在的手机都是触屏控制的,那么在游戏中我们想通过手指在屏幕上滑动捕获相应的动作呢?Unity官网API中提供了Input类和Touch类,在该类里提供了许多接口.相信只要我们稍微看下,就可以自己应用了 ...

  8. CSS3中和动画有关的属性transform、transition 和 animation

    CSS3中和动画有关的属性有三个  transform. transition 和 animation.下面来一一说明:        transform     从字面来看transform的释义为 ...

  9. 01.CSS动画-->transform

    transform: translate(参数1,参数2):让元素在X轴与Y轴方向发生偏移-->参数1:X:参数2:Y rotate(参数1):让元素进行旋转:单位(deg) scale(参数1 ...

随机推荐

  1. Day07_39_集合中的remove()方法 与 迭代器中的remove()方法

    集合中的remove()方法 与 迭代器中的remove()方法 深入remove()方法 iterator 中的remove()方法 collection 中的remove(Object)方法 注意 ...

  2. Windows新建选项排序

    运行输入:regedit 然后找到:HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Explorer\Discardable\P ...

  3. 技术面试问题汇总第001篇:猎豹移动反病毒工程师part1

    我在2014年7月1日参加了猎豹移动(原金山网络)反病毒工程师的电话面试,但是很遗憾,由于我当时准备不足,加上自身水平不够,面试官向我提出的很多技术问题我都没能答出来(这里面既有基础类的问题,也有比较 ...

  4. 从苏宁电器到卡巴斯基第27篇:难忘的三年硕士时光 V

    一发不可收拾 安全领域的公司都喜欢在看雪或者是吾爱破解这样的网站上发布招聘贴,因为这样的话很容易就能够招到适合的人才,也算是精准营销了.而像我这种想进入安全圈的,也会在这里发布自己的求职简历,以期望能 ...

  5. 异步访问技术Ajax(XMLHttpRequest)

    目录 AJAX XMLHttpRequest Ajax向服务器发送请求 Ajax接收服务器响应 AJAX - onreadystatechange 事件 使用 Callback 函数 一次Ajax请求 ...

  6. OWASP-ZAP扫描器的使用

    目录 OWASP-ZAP 更新 代理 目录扫描 主动扫描(Active  Scan) 扫描结果 生成报告 OWASP-ZAP OWASP Zed攻击代理(ZAP)是世界上最受欢迎的免费安全审计工具之一 ...

  7. node-mongo-服务器封装

    分为三个文件 mongo.js基本的封装了下mongo数据库操作 workmongo.js 里面有路由和解析操作(可以根据具体业务进行扩充) mainmongo.js 服务器相关 调用例子: 查询数据 ...

  8. Wampserver-添加虚拟主机

    鼠标左键点击,之后点击第一个 localhost(有一个小房子) 添加虚拟地址 具体添加 完成界面 注意:这个时候一定需要重启一个Wampserver64 如果没有重启直接进入4这个步骤,会发现进入的 ...

  9. SQL必学必会笔记 —— 基础篇

    基础篇 SQL语言按照功能划分 DDL(DataDefinitionLanguage),也就是数据定义语言,它用来定义我们的数据库对象,包括 数据库.数据表和列.通过使用DDL,可以创建,删除和修改数 ...

  10. @Aspect 注解使用详解

    AOP为Aspect Oriented Programming的缩写,意为:面向切面编程,通过预编译方式和运行期动态代理实现程序功能的统一维护的一种技术.AOP是OOP的延续,是软件开发中的一个热点, ...