转换 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( ...
随机推荐
- Apache tica详述
Tika是一个内容抽取的工具集合(a toolkit for text extracting).它集成了POI, Pdfbox 并且为文本抽取工作提供了一个统一的界面.其次,Tika也提供了便利的扩展 ...
- 开发JSP自定义标签
互联网上有很多种自定义标签,今天学的这种非常简单哟 1 编写一个普通类在类中定义一个经常使用得到的 函数 如public String toUpper(String str){ ...... } 2 ...
- PS常用快捷键(收藏)
一.工具箱(多种工具共用一个快捷键的可同时按[Shift]加此快捷键选取) 矩形.椭圆选框工具 [M] 移动工具 [V] 套索.多边形套索.磁性套索 [L] 魔棒工具 [W] 裁剪工具 [C] 切片工 ...
- effective C++学习一(仅供个人学习记录,本文摘录effective C++)
条款 1:尽量用 const 和 inline 而不用#define #define ASPECT_RATIO 1.653 编译器会永远也看不到 ASPECT_RATIO 这个符号名,因为在源码进 ...
- C# WInForm中 窗体的this.width和this.height的属性值不能大于显示器的最大分辨率
最近在做一个小项目的时候,发现在 1680x1050 分辨率显示器上写的代码,将窗体的宽度和高度 设置成了 1600×900,在高于1600×900的分辨率上缩放显示很正常, 而后转移到 分辨率低于 ...
- asp.net导出excle
思路:实际上是读取页面上某个控件下的内容再导出 protected void btnExcel_Click(object sender, EventArgs e) { string bgType = ...
- Mysql 表约束 非空、唯一、主键、自增长、默认、外键约束(基础6)
非空(not null).唯一(unique key).主键(primary key).自增长(auto_increment).默认约束(default) 准备基础环境: mysql> crea ...
- python全栈开发 什么是python python命名及循环
python全栈 一. python介绍: 1. python起源 2. 主要应用领域; web,人工智能,云计算,系统运维. 1.1 python是一门什么语言? python是一 ...
- Django常用的模板标签
django 目前了解的各个文件的作用: manage.py: 运行服务 urls: 路由 views: 处理数据 传递给 html模板 html文件: 通过 {{变量名}}接收变量 通过 模板标 ...
- Vue之常用语法
变量的定义: var定义的变量:只有全局作用域和函数作用域.有变量提升,先打印后定义变量不会报错,打印结果为undefined let定义的变量:没有变量提升 ——>有局 ...