转换 transform
转换
定义:
1、转换是使元素改变形状、尺寸和位置的一种效果
2、又称为变形,即,可以向元素应用 2D 或 3D 转换,从而对元素进行旋转、缩放、移动或倾斜
3、2D转换:使元素在 X 轴和 Y 轴平面上发生变化,改变其形状、尺寸和位置
4、3D转换:元素还可以在 Z 轴上发生变化
旋转:
Transform:rotate(30deg);顺时针旋转30°;
Transform:rotate(-30deg);逆时针旋转30°;
缩放:
Transform:scale(2,0.5); x坐标放大2倍,纵坐标缩小0.5倍
Transform:scalte(0.5,2);x轴方向缩小0.5倍,y轴放大2倍;
解决缩放和旋转不能共存的问题:
transform: rotate(-30deg) scale(0.5,2);
设置旋转原点:
用来指定元素的转换原点位置,默认情况下,转换的原点在元素的中心点,或者是 X 轴和 Y 轴的 50% 处
transform-origin : 数值/百分比/关键字;
一个值:表示所有轴的位置
两个值:表示 X 轴和 Y 轴
三个值:表示 X 轴、Y 轴和 Z 轴
transform-origin: 30px;
倾斜:skew(deg)
transform: skew(45deg);
平移:translate
transform:translate(100px);
写在同一行时:一起生效
transform: rotate(-30deg) scale(0.5,2) skew(45deg) translate(100px);
左上角:
transform-origin:0% 0%;左上角
transform-origin:left top;左上角
缩放!!!!::它缩放了所有,包括像素!!!
旋转!!!!::它旋转了坐标轴!所有的转换均以旋转后的坐标轴来转换!!
3D
首先:给父标签设置属性:transform-style:perspective-3d;
然后:给需要3D变换的子标签设置属性:transform-style:perspective-3D;
这两步缺一不可
下面正式设置子标签的属性(这里只写关于3D的):
第一条:设置3D 元素距视图的距离,以像素计
Perspective:(400px)(像素越小代表视角离元素越近,会变大,像素越大,代表视角离元素越远,会变小)
第二条设置3D旋转!起码拉开一个角,使其有3D效果
位移:translateZ(100px);
旋转:rotateX(45deg);
rotateY(45deg);
rotateZ(45deg);
(其一便可);
倾斜:skew(x)或skew(x,y)取值为角度
缩放:scale(0.5,0.3)取值为0~1的小数,不可百分比!
转换 transform的更多相关文章
- CSS新特性之2D转换transform
transform是css3中具有颠覆性特征之一,可以实现元素的位移.旋转.缩放等效果 1.位移translate 1.1语法 transform: translate(x,y);//x,y分别表示x ...
- CSS3转换(transform)基本用法介绍
一个炫酷的网页离不开css的transform.transition.animation三个属性,之前一直没有涉及到这块内容,刚好最近要做一个相关东西,趁此机会好好学一学这三个属性. 一.功能 实现元 ...
- 转换…Transform…(Power Query 之 M 语言)
转换列: = Table.TransformColumns( 表, {{"列名1", 转换函数1, 数据类型1},-,{"列名n", 转换函数n, 数据类型n} ...
- 淘宝三角做法防CSS2D转换
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- CSS自学笔记(13):CSS3 2D/3D转换
CSS3中新增了对元素进行2D和3D的转换效果,这样可以是开发人员很方便的做出视觉效果更好的网页来. 通过CSS3中属性的定义,我们可以对元素进行移动.缩放.拉伸.旋转等等,可以通过定义transfo ...
- JavaScript是如何工作的:深入类和继承内部原理 + Babel和TypeScript 之间转换
这是专门探索 JavaScript 及其所构建的组件的系列文章的第 15 篇. 如果你错过了前面的章节,可以在这里找到它们: JavaScript 是如何工作的:引擎,运行时和调用堆栈的概述! Jav ...
- JavaScript是如何工作的:深入类和继承内部原理 + Babel和TypeScript之间转换
现在构建任何类型的软件项目最流行的方法这是使用类.在这篇文章中,探讨用 JavaScript 实现类的不同方法,以及如何构建类的结构.首先从深入研究原型工作原理,并分析在流行库中模拟基于类的继承的方法 ...
- CSS属性组-动画、转换、渐变
一.动画 animation动画属性是一个简写属性,用于设置六个动画属性 aninmation-name动画名称,被调用 animation-duration完成动画需要的持续时间 animation ...
- transform 动画效果
http://www.css88.com/tool/css3Preview/Transform.html transform的含义是:改变,使…变形:转换 transform的属性包括:rotate( ...
随机推荐
- C# 读取ini文件,读不出来原因
先赋上相关读取ini文件代码 public class INIHelper { public string inipath; [DllImport("kernel32")] pri ...
- 初识C语言中的函数(男神翁凯老师MOOC)
什么是函数? 函数是一块代码,接收零个或多个参数,做一件事情,并返回零个或一个值. 可以先想象成数学中的函数: y=f(x) 例如 求begin到end和的函数定义 void sum(int begi ...
- Webpack Loaders
[Webpack Loaders] 1.Query parameters Loader can be passed query parameters via a query string (just ...
- linux中awk命令学习
awk是一个强大的文本分析工具,awk就是把文件逐行的读入,以空格为默认分隔符将每行切片,切开的部分再进行各种分析处理. 通常获取某一行时,我们会使用 “grep 关键字“进行查找,但在读取某一列时, ...
- 大数据入门到精通4--spark的rdd的map使用方式
学习了之前的rdd的filter以后,这次来讲spark的map方式 1.获得文件 val collegesRdd= sc.textFile("/user/hdfs/CollegeNavig ...
- web.xml中<security-constraint>和四种认证类型
https://blog.csdn.net/lisheng19870305/article/details/40819481 sztc开发中http请求一直发送后无响应,通过soapui定位异常信息为 ...
- java面试题:分布式
分布式分为分布式缓存(Redis).分布式锁(Redis或Zookeeper).分布式服务(Dubbo或SpringCloud).分布式服务协调(Zookeeper).分布式消息队列(Kafka.Ra ...
- pta l2-4(这是二叉搜索树吗?)
题目链接:https://pintia.cn/problem-sets/994805046380707840/problems/994805070971912192 题意:给定n以及n个整数,问该序列 ...
- 三星笔记本安装系统时报错:image failed to verify with * access denied* press any key to continue.
安装系统从光盘启动报错: 出现黑屏,并且有一个提示框image failed to verify with *access denied*press any key to continue 原因:三星 ...
- js改变表单的内容样式
一.改变单个样式 var obj = document.getElementById("id"); obj.style.cssText = " display: ...