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学习笔记(二)的更多相关文章

  1. 从今天开始 每天记录HTML,CSS 部分的学习笔记

    从今天开始 每天记录HTML,CSS 部分的学习笔记

  2. CSS Grid 布局学习笔记

    CSS Grid 布局学习笔记 好久没有写博客了, MDN 上关于 Grid 布局的知识比较零散, 正好根据我这几个月的实践对 CSS Grid 布局做一个总结, 以备查阅. 1. 基础用法 Grid ...

  3. html css的简单学习(二)

    html css的简单学习(二) <!Doctype html>告诉浏览器,这是一个html文档.lang="en" 默认是en,表示英语:zh-Hans 中文简体:z ...

  4. CSS权威指南学习笔记系列(1)CSS和文档

    题外话:HTML是一种结构化语言,而CSS是它的补充:这是一种样式语言.CSS是前端三板斧之一,因此学习CSS很重要.而我还是菜鸟,所以需要加强学习CSS.这个是我学习CSS权威指南的笔记,如有不对, ...

  5. css权威指南学习笔记 —— css选择器

    1,选择器:选择器的一些基本常用规则基本都记得,w3c上都有,平时也常用,不常用的一些后代选择器经常就忘记了.一些归纳一下后代选择器,加深一下印象: a:子选择器:   p>a  a是直接是p的 ...

  6. 原生 CSS 网格布局学习笔记

    下是来自Oliver Williams的帖子. Oliver已经学习了相当长时间的原生CSS网格,可以说是在CSS网格方面有一定的发言权.在这篇文章中,他将以非同寻常的思路分析自己的CSS网格布局学习 ...

  7. [读书笔记]C#学习笔记一: .Net Framwork

    前言: 一次偶然的机会  在园子里看到@Learning hard 出版的一本书: <<C#学习笔记>>, 然后买来 一直到现在读完, 感觉很不错, 适合入门, 书中内容是从C ...

  8. [读书笔记]C#学习笔记三: C#类型详解..

    前言 这次分享的主要内容有五个, 分别是值类型和引用类型, 装箱与拆箱,常量与变量,运算符重载,static字段和static构造函数. 后期的分享会针对于C#2.0 3.0 4.0 等新特性进行. ...

  9. [读书笔记]C#学习笔记八:StringBuilder与String详解及参数传递问题剖析

    前言 上次在公司开会时有同事分享windebug的知识, 拿的是string字符串Concat拼接 然后用while(true){}死循环的Demo来讲解.其中有提及string操作大量字符串效率低下 ...

随机推荐

  1. (转)关于linux挂载window下共享文件

    关于linux挂载window下共享文件的方法: ①事先建立linux下文件夹,例如“ /mnt/linux-folder”②用mount命令挂载    mount -o username=windo ...

  2. Apache ZooKeeper

    https://zookeeper.apache.org/ https://zh.wikipedia.org/wiki/Apache_ZooKeeper Apache ZooKeeper是Apache ...

  3. Python——os(二)文件对象

    本节介绍 os 模块创建 file 对象的函数 os.fdopen(fd[, mode[, bufsize]]) 用文件描述符打开文件,返回一个连接到 fd 的打开的文件对象,参数 mode 和 bu ...

  4. java 散列

    原文:https://www.cnblogs.com/younghao/p/8333795.html 为什么要设计散列这种数据结构呢?在现实世界中,实体之间可能存在着映射关系(key-value),比 ...

  5. Thinkphp5模板继承

    代码 application\index\controller\index.php <?php namespace app\index\controller; use app\index\con ...

  6. UNIX环境编程学习笔记(4)——文件I/O之dup复制文件描述符

    lienhua342014-08-23 UNIX 提供了两个函数 dup 和 dup2 用于复制一个现存的文件描述符. #include <unistd.h> int dup(int fi ...

  7. 备忘录:在alpine上安装kvm

    原文:  https://wiki.alpinelinux.org/wiki/KVM     KVM is an open source virtualization solution in a ke ...

  8. Lua基础语法讲解

    Lua 是什么? Lua 是一种轻量小巧的脚本语言,用标准C语言编写并以源代码形式开放, 其设计目的是为了嵌入应用程序中,从而为应用程序提供灵活的扩展和定制功能. Lua 是巴西里约热内卢天主教大学( ...

  9. CorelDRAW中六种复制对象的方法详解

    复制可保证对象的大小一致,复制也是所有操作中最基本的操作.CorelDRAW软件中支持多种复制对象的操作,本教程将详解CorelDRAW中六种复制对象的方法. 方法一 选择复制对象,点击编辑→复制,再 ...

  10. HTML5标签canvas制作动画

    摘要: canvas可以绘制图像,自然而然的就可以制作动画,因为动画的每一帧都是图像.我们可以利用javascript的setInterval函数来实现动画效果. 下面是一个例子,小圆绕着红点圆心不停 ...