css笔记 - transform学习笔记(二)
transform转换
CSS transform
属于2D/3D上的转换、变形效果。他不是一个动画,他就是变形。比如正方形变平行四边形,再变圆形。都是形状变成另一个形状。
但是如果配合上transition/animation,他就会从一个形状变成另一形状。只要有一段时间内的过渡效果,就形成了动画。
主要功能有:拉伸变形、倾斜、位移、缩放、旋转。
原理是:改变元素的尺寸、形状、角度、位置等
js写法:
object.style.transform="rotate(7deg)";
transform-origin 设置元素的基点位置
该元素允许改变被转换元素的位置
默认不设置的情况下,x轴坐标是(border-width + padding + width) / 2 + 'px',第二个坐标是(border-width + padding +height) / 2 + 'px';
transform-style 被嵌套元素在3D空间如何显示
规定被嵌套元素如何在3D空间中显示:
flat:表示子元素不保留3d位置、
preserve-3d表示 子元素保留3d位置
属性值: flat、preserve-3d、unset、inherit、initial
需要与transform一同使用。
transform的各个方法属性
name | 含义 |
---|---|
none | 我不定义好不好 |
translate() | 位移 |
rotate() | 旋转 |
scale() | 缩放 |
skew() | 拉伸变形 |
matrix() | 混合, 集百家之大乘。 |
方法可能的配置
skew:翻转给定的角度,xdeg水平翻转度数,ydeg垂直翻转度数。能为负
D | name | 含义 | 中心点 | 备注 |
---|---|---|---|---|
2 | skew(xdeg,ydeg) | 拉伸变形 | 默认中心点就是盒模型的中心点 | |
2 | skewX(xdeg) | 水平方向拉伸变形 | 同上 | |
2 | skewY(ydeg) | 垂直方向拉伸变形 | 同上 | |
2 | skew(n-deg) | 延伸,只写一个也起作用,不过是只默认作用于x轴水平拉伸。 | 同上 |
* 可以为负值,负值时翻转拉伸的方向,比如之前是左上角-右下角拉伸,翻转后变成右上角-左下角的拉伸。
scale:x对应宽度,y对应高度,缩放到原来宽高的倍数。
D | name | 含义 | 中心点 | 备注 |
---|---|---|---|---|
2 | scale(x,y) | 缩放 | 默认中心点就是盒模型的中心点 | |
2 | scale(n-deg) | 缩放 | 默认中心点就是盒模型的中心点 | 和上边的区别就是默认只缩放水平方向,就像scaleX(x) |
3D | scale3d(x,y,z) | 缩放 | 同上 | 我设置三个点和设置正常的两个点没什么区别 |
2 | scaleX(x) | 横向缩放 | 同上 | 正值时横向拉伸,同skew的区别是:水平拉伸不带斜线角度 |
2 | scaleY(y) | 纵向缩放 | 同上 | 正值时竖向拉伸,同skew的区别是:垂直拉伸不带斜线角度 |
3D | scaleZ(z) | 纵深方向缩放 | 同上 | 2d图形设置没有多大的区别,不过可以看到文字微妙的变化 |
首先,缩放的倍数就是数字的实际倍数,比如写2就是放大两倍。再者,当数值是大于0的值时,就是放大。当数值在0-1之间的时候,就是缩小。所以 放大还是缩小看的是数值的关系,和正负没有关系。
数值为0就是原来的宽高*0时就看不见了。
数值为1是放大,但是是宽高*1,和没乘一样。还和原来一边大。
另外,计算时不光是乘宽高,内边距padding、边框宽度border-width、甚至外边距margin都跟着升天乘了相应倍数
rotate:N°旋转,正值顺时针旋转,负值逆时针旋转。
D | name | 含义 | 中心点 | 备注 |
---|---|---|---|---|
2 | rotate(angle) | 旋转 | 默认中心点就是盒模型的中心点 | angle值 |
3D | rotate3d(x,y,z,angle) | N°旋转 | 同上 | |
3D | rotateX(angle) | N°旋转 | 同上 | 围绕x轴做水平方向翻转 |
3D | rotateY(angle) | N°旋转 | 同上 | 围绕y轴做垂直方向翻转 |
3D | rotateZ(angle) | N°旋转 | 同上 |
translate(x,y):相对于当前位置向水平(x)/垂直(y)方向移动,正值向右/下,负值向左/上
D | name | 含义 | 中心点 | 备注 |
---|---|---|---|---|
2 | translate(x,y) | 2d两点位移 | 默认中心点就是盒模型的中心点 | |
3D | translate3d(x,y,z) | 3d三点位移 | 同上 | |
2 | translateX(x) | 只是用 X 轴的值位移 | 同上 | |
2 | translateY(y) | 只是用 Y 轴的值位移 | 同上 | |
3D | translateZ(z) | 只是用 Z 轴的值位移 | 同上 |
括号里边, 数值后边一定要有单位值 ,如果没有单位值不起作用
translate执行的位移,对于周围的元素不产生任何影响。就像relative的效果。
matrix(n,n,n,n,n,n)
D | name | 含义 | 中心点 | 备注 |
---|---|---|---|---|
2 | matrix(n,n,n,n,n,n) | 矩阵,模型 | 默认中心点就是盒模型的中心点 | 6个值的矩阵 |
3D | matrix(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) | 矩阵,模型 | 同上 | 16个值,4x4矩阵 |
perspective 规定3D元素的透视效果
perspective(n) 为3D转换元素设置透视视图
规定3D元素的透视效果
目前浏览器都不支持,只有safari和chrome用替代元素-webkit-perspective
只影响有3d转换属性的子元素,是加在父元素身上的。
需要配合perspective-origin一同使用。
perspective-origin 规定3D元素的底部位置
规定3D元素的底部位置 ??
大致属性同perspective
perspective-origin : 50% 200px; 为什么第一个是百分比,第二个是像素值?可以有的值或格式:top,bottom,center,length,%。
x-axis 定义该视图在x轴上的位置、
y-axis 定义该视图在y轴上的位置
perspective-visibility 定义元素在不面对屏幕时是否可见
混合写法
多个属性值之间用逗号隔开即可。
transform: rotate(30deg) scale(.2) skew(20deg);
兼容性及写法
IE10+以上不用想,其他现代浏览器
chrome、safari要加前缀-webkit-
ie9加前缀-ms-
前缀
transform: ;
-moz-transform: ;
-webkit-transform: ;
-ms-transform: ;
-o-transform: ;
css笔记 - transform学习笔记(二)的更多相关文章
- 从今天开始 每天记录HTML,CSS 部分的学习笔记
从今天开始 每天记录HTML,CSS 部分的学习笔记
- CSS Grid 布局学习笔记
CSS Grid 布局学习笔记 好久没有写博客了, MDN 上关于 Grid 布局的知识比较零散, 正好根据我这几个月的实践对 CSS Grid 布局做一个总结, 以备查阅. 1. 基础用法 Grid ...
- html css的简单学习(二)
html css的简单学习(二) <!Doctype html>告诉浏览器,这是一个html文档.lang="en" 默认是en,表示英语:zh-Hans 中文简体:z ...
- CSS权威指南学习笔记系列(1)CSS和文档
题外话:HTML是一种结构化语言,而CSS是它的补充:这是一种样式语言.CSS是前端三板斧之一,因此学习CSS很重要.而我还是菜鸟,所以需要加强学习CSS.这个是我学习CSS权威指南的笔记,如有不对, ...
- css权威指南学习笔记 —— css选择器
1,选择器:选择器的一些基本常用规则基本都记得,w3c上都有,平时也常用,不常用的一些后代选择器经常就忘记了.一些归纳一下后代选择器,加深一下印象: a:子选择器: p>a a是直接是p的 ...
- 原生 CSS 网格布局学习笔记
下是来自Oliver Williams的帖子. Oliver已经学习了相当长时间的原生CSS网格,可以说是在CSS网格方面有一定的发言权.在这篇文章中,他将以非同寻常的思路分析自己的CSS网格布局学习 ...
- [读书笔记]C#学习笔记一: .Net Framwork
前言: 一次偶然的机会 在园子里看到@Learning hard 出版的一本书: <<C#学习笔记>>, 然后买来 一直到现在读完, 感觉很不错, 适合入门, 书中内容是从C ...
- [读书笔记]C#学习笔记三: C#类型详解..
前言 这次分享的主要内容有五个, 分别是值类型和引用类型, 装箱与拆箱,常量与变量,运算符重载,static字段和static构造函数. 后期的分享会针对于C#2.0 3.0 4.0 等新特性进行. ...
- [读书笔记]C#学习笔记八:StringBuilder与String详解及参数传递问题剖析
前言 上次在公司开会时有同事分享windebug的知识, 拿的是string字符串Concat拼接 然后用while(true){}死循环的Demo来讲解.其中有提及string操作大量字符串效率低下 ...
随机推荐
- JavaScript数据去掉空值
js数组中过滤掉false, null, 0, "", undefined, and NaN值的方法 对于 false,null,0,undefiend,NaN直接取!得到的都是t ...
- Android 开发规范
一. 总包命名规范: 1. 主程序:com . 公司简写 . 项目名称简写 如彩票主程序: com.whszzy.caipiao 2. 独立模块:com . 公司简写 . 项目名称简写 . 模块名称 ...
- Ubuntu 12.04安装Java开发环境(jdk1.7 + Eclipse)
首先,去官网下载linux版本的jdk和eclipse tar包,并将其解压出来.我将jdk包发在了/usr/java/目录下,eclipse放在了/opt/目录下. 然后,配置java开发环境,即安 ...
- 回想sql语句中的各种连接
1. 内连接(Inner Join) 内连接是最常见的一种连接,它页被称为普通连接,而E.FCodd最早称之为自然连接. 以下是ANSI SQL-92标准 select * from t_ins ...
- 如何找回Ucenter创始人密码,账号无需修改
UCenter 创始人的密码非常重要,忘记或丢失后,就不能进入 UCenter 进行用户和数据的管理,也会对站点造成安全隐患.由于 UCenter 的密码是采用两次 md5 加一个随机数的形式加密的, ...
- Yii2 session的使用方法(2)
yii2打开session use yii\web\Session; $session = Yii::$app->session; // check if a session is alread ...
- MATLAB错误:下标索引必须是正整数类型或者逻辑类型
背景: Matlab R2015b 问题: 在运行BP算法时出现错误: 下标索引必须是正整数类型或者逻辑类型 output( i , class( i ) ) = 1 ; 解决办法: 根目录下运行, ...
- 设置wetty不需要账号登录便可进行命令行操作
前一篇随笔我们将了Linux怎么安装部署Wetty服务,但是我们看到,在浏览器中输入http://127.0.0.1:3000进行访问的时候,还需要我们输入账号密码进行认证(如下图第一行所示). 但在 ...
- 【ES】简单使用
import sys reload(sys) sys.setdefaultencoding('utf-8') from datetime import datetime from elasticsea ...
- 《HTTP权威指南》学习笔记——URL和资源
URL与资源 URL是互联网资源的标准化名称 1.浏览互联网资源 URL是浏览器寻找信息时所需的资源位置 URI是一类更通用的资源标识符,URL是它的子集. URI的两个子集:URL和URN URL提 ...