缩放 transform
转换属性 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的更多相关文章
- 在CSS3中,可以利用transform功能来实现文字或图像的旋转、缩放、倾斜、移动这四种类型的变形处理
CSS3中的变形处理(transform)属 transform的功能分类 1.旋转 transform:rotate(45deg); 该语句使div元素顺时针旋转45度.deg是CSS 3的“Val ...
- css010 css的transform transition和animation
css010 css的transform transition和animation 看着没有一个能想起他们是干什么的.. 1. Transform Transform(变形) r ...
- 图层的transform属性
Main.storyboard // // ViewController.m // 7A11.图层的transform属性 // // Created by huan on 16/2/4. // ...
- CSS3的变形transform、过渡transition、动画animation学习
学习CSS3动画animation得先了解一些关于变形transform.过渡transition的知识 这些新属性大多在新版浏览器得到了支持,有些需要添加浏览器前缀(-webkit-.-moz-.- ...
- css笔记——区分css3中的transform transition animation
出处:http://blog.csdn.net/dyllove98/article/details/8957232 CSS3中和动画有关的属性有三个 transform. transition ...
- CSS3中动画属性transform、transition 和 animation
CSS3中和动画有关的属性有三个 transform.transition 和 animation.下面来一一说明: transform 从字面来看transform的释义为改变,使 ...
- Unity 触屏缩放模型
现在的手机都是触屏控制的,那么在游戏中我们想通过手指在屏幕上滑动捕获相应的动作呢?Unity官网API中提供了Input类和Touch类,在该类里提供了许多接口.相信只要我们稍微看下,就可以自己应用了 ...
- CSS3中和动画有关的属性transform、transition 和 animation
CSS3中和动画有关的属性有三个 transform. transition 和 animation.下面来一一说明: transform 从字面来看transform的释义为 ...
- 01.CSS动画-->transform
transform: translate(参数1,参数2):让元素在X轴与Y轴方向发生偏移-->参数1:X:参数2:Y rotate(参数1):让元素进行旋转:单位(deg) scale(参数1 ...
随机推荐
- 一键打造vim ide 支持python golang shell等高级特性
1.vim-for-devops github: https://github.com/yxxhero/vim_for_devops 利用vim插件打造支持python.shell.golang的id ...
- Ionic5整合极光推送JPush ( 简单 )
项目初始化 1. 安装项目依赖: # 安装cordova插件 ionic cordova plugin add jpush-phonegap-plugin --variable APP_KEY=&qu ...
- SpringCloud之远程调用OpenFeign和Ribbon
Ribbon.Feign和OpenFeign的区别 SpringCloudAlibaba微服务实战教程系列 Spring Cloud 微服务架构学习记录与示例 一 简介 Feign是Netflflix ...
- hdu2594 简单KMP
题意: 给你两个串,问你s1的前缀和s2的后缀最长公共部分是多少. 思路: 根据KMP的匹配形式,我们求出s1的next,然后用s1去匹配s2,输出当匹配到s2的最后一个的时候的匹 ...
- CVE-2013-1347:从入门到放弃之调试分析令人崩溃的 Microsoft IE CGenericElement UAF 漏洞
0x01 2013 年 "水坑" APT 攻击事件 在 2013 年 5 月,美国的劳工部网站被黑,利用的正是 CVE-2013-1347 这个漏洞,在当时导致大量使用 IE8 访 ...
- Windows核心编程 第四章 进程(中)
4.2 CreateProcess函数 可以用C r e a t e P r o c e s s函数创建一个进程: BOOL CreateProcessW( _In_opt_ LPCWSTR lpAp ...
- 栈(Stack) --- C# 自定义和微软官方的区别
最近在学习算法基础,本篇文章作为一个记录,也算是一次实践和总结.(顺便也深入C#运行时学习一下) 目录 1. 栈是什么 2. Stack 自定义实现 3. Stack C#官方实现 4. 区别 5. ...
- 【报错】org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'webSocketHandlerMapping' defined in class path resource
环境:maven+eclipse+jdk1.8 [tomcat使用的是maven自带的插件,实质原因就是出在tomcat版本问题] 背景:在进行SSM集成WebSocket的时候,项目启动报org.s ...
- 【微信小程序】--小程序中循环遍历(包括js中遍历和wxml中的遍历)
文章为博主原创,纯属个人见解,如有错误欢迎指出. 如需转载,请注明出处. 在js中遍历 for (var index in res.data.infos) { res.data.infos[index ...
- 【Mybatis源码解析】- 整体架构及原理
整体架构 version-3.5.5 在深入了解Mybatis的源码之前,我们先了解一下Mybatis的整体架构和工作原理,这样有助于我们在阅读源码过程中了解思路和流程. 核心流程 在上一遍的入门程序 ...