转换属性 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. 一键打造vim ide 支持python golang shell等高级特性

    1.vim-for-devops github: https://github.com/yxxhero/vim_for_devops 利用vim插件打造支持python.shell.golang的id ...

  2. Ionic5整合极光推送JPush ( 简单 )

    项目初始化 1. 安装项目依赖: # 安装cordova插件 ionic cordova plugin add jpush-phonegap-plugin --variable APP_KEY=&qu ...

  3. SpringCloud之远程调用OpenFeign和Ribbon

    Ribbon.Feign和OpenFeign的区别 SpringCloudAlibaba微服务实战教程系列 Spring Cloud 微服务架构学习记录与示例 一 简介 Feign是Netflflix ...

  4. hdu2594 简单KMP

    题意:      给你两个串,问你s1的前缀和s2的后缀最长公共部分是多少. 思路:      根据KMP的匹配形式,我们求出s1的next,然后用s1去匹配s2,输出当匹配到s2的最后一个的时候的匹 ...

  5. CVE-2013-1347:从入门到放弃之调试分析令人崩溃的 Microsoft IE CGenericElement UAF 漏洞

    0x01 2013 年 "水坑" APT 攻击事件 在 2013 年 5 月,美国的劳工部网站被黑,利用的正是 CVE-2013-1347 这个漏洞,在当时导致大量使用 IE8 访 ...

  6. Windows核心编程 第四章 进程(中)

    4.2 CreateProcess函数 可以用C r e a t e P r o c e s s函数创建一个进程: BOOL CreateProcessW( _In_opt_ LPCWSTR lpAp ...

  7. 栈(Stack) --- C# 自定义和微软官方的区别

    最近在学习算法基础,本篇文章作为一个记录,也算是一次实践和总结.(顺便也深入C#运行时学习一下) 目录 1. 栈是什么 2. Stack 自定义实现 3. Stack C#官方实现 4. 区别 5. ...

  8. 【报错】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 ...

  9. 【微信小程序】--小程序中循环遍历(包括js中遍历和wxml中的遍历)

    文章为博主原创,纯属个人见解,如有错误欢迎指出. 如需转载,请注明出处. 在js中遍历 for (var index in res.data.infos) { res.data.infos[index ...

  10. 【Mybatis源码解析】- 整体架构及原理

    整体架构 version-3.5.5 在深入了解Mybatis的源码之前,我们先了解一下Mybatis的整体架构和工作原理,这样有助于我们在阅读源码过程中了解思路和流程. 核心流程 在上一遍的入门程序 ...