转换

定义:

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的更多相关文章

  1. CSS新特性之2D转换transform

    transform是css3中具有颠覆性特征之一,可以实现元素的位移.旋转.缩放等效果 1.位移translate 1.1语法 transform: translate(x,y);//x,y分别表示x ...

  2. CSS3转换(transform)基本用法介绍

    一个炫酷的网页离不开css的transform.transition.animation三个属性,之前一直没有涉及到这块内容,刚好最近要做一个相关东西,趁此机会好好学一学这三个属性. 一.功能 实现元 ...

  3. 转换…Transform…(Power Query 之 M 语言)

    转换列: = Table.TransformColumns( 表, {{"列名1", 转换函数1, 数据类型1},-,{"列名n", 转换函数n, 数据类型n} ...

  4. 淘宝三角做法防CSS2D转换

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. CSS自学笔记(13):CSS3 2D/3D转换

    CSS3中新增了对元素进行2D和3D的转换效果,这样可以是开发人员很方便的做出视觉效果更好的网页来. 通过CSS3中属性的定义,我们可以对元素进行移动.缩放.拉伸.旋转等等,可以通过定义transfo ...

  6. JavaScript是如何工作的:深入类和继承内部原理 + Babel和TypeScript 之间转换

    这是专门探索 JavaScript 及其所构建的组件的系列文章的第 15 篇. 如果你错过了前面的章节,可以在这里找到它们: JavaScript 是如何工作的:引擎,运行时和调用堆栈的概述! Jav ...

  7. JavaScript是如何工作的:深入类和继承内部原理 + Babel和TypeScript之间转换

    现在构建任何类型的软件项目最流行的方法这是使用类.在这篇文章中,探讨用 JavaScript 实现类的不同方法,以及如何构建类的结构.首先从深入研究原型工作原理,并分析在流行库中模拟基于类的继承的方法 ...

  8. CSS属性组-动画、转换、渐变

    一.动画 animation动画属性是一个简写属性,用于设置六个动画属性 aninmation-name动画名称,被调用 animation-duration完成动画需要的持续时间 animation ...

  9. transform 动画效果

    http://www.css88.com/tool/css3Preview/Transform.html transform的含义是:改变,使…变形:转换 transform的属性包括:rotate( ...

随机推荐

  1. C# 读取ini文件,读不出来原因

    先赋上相关读取ini文件代码 public class INIHelper { public string inipath; [DllImport("kernel32")] pri ...

  2. 初识C语言中的函数(男神翁凯老师MOOC)

    什么是函数? 函数是一块代码,接收零个或多个参数,做一件事情,并返回零个或一个值. 可以先想象成数学中的函数: y=f(x) 例如 求begin到end和的函数定义 void sum(int begi ...

  3. Webpack Loaders

    [Webpack Loaders] 1.Query parameters Loader can be passed query parameters via a query string (just ...

  4. linux中awk命令学习

    awk是一个强大的文本分析工具,awk就是把文件逐行的读入,以空格为默认分隔符将每行切片,切开的部分再进行各种分析处理. 通常获取某一行时,我们会使用 “grep 关键字“进行查找,但在读取某一列时, ...

  5. 大数据入门到精通4--spark的rdd的map使用方式

    学习了之前的rdd的filter以后,这次来讲spark的map方式 1.获得文件 val collegesRdd= sc.textFile("/user/hdfs/CollegeNavig ...

  6. web.xml中<security-constraint>和四种认证类型

    https://blog.csdn.net/lisheng19870305/article/details/40819481 sztc开发中http请求一直发送后无响应,通过soapui定位异常信息为 ...

  7. java面试题:分布式

    分布式分为分布式缓存(Redis).分布式锁(Redis或Zookeeper).分布式服务(Dubbo或SpringCloud).分布式服务协调(Zookeeper).分布式消息队列(Kafka.Ra ...

  8. pta l2-4(这是二叉搜索树吗?)

    题目链接:https://pintia.cn/problem-sets/994805046380707840/problems/994805070971912192 题意:给定n以及n个整数,问该序列 ...

  9. 三星笔记本安装系统时报错:image failed to verify with * access denied* press any key to continue.

    安装系统从光盘启动报错: 出现黑屏,并且有一个提示框image failed to verify with *access denied*press any key to continue 原因:三星 ...

  10. js改变表单的内容样式

    一.改变单个样式    var obj = document.getElementById("id");   obj.style.cssText = " display: ...