转换

定义:

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. Apache tica详述

    Tika是一个内容抽取的工具集合(a toolkit for text extracting).它集成了POI, Pdfbox 并且为文本抽取工作提供了一个统一的界面.其次,Tika也提供了便利的扩展 ...

  2. 开发JSP自定义标签

    互联网上有很多种自定义标签,今天学的这种非常简单哟 1 编写一个普通类在类中定义一个经常使用得到的 函数 如public String toUpper(String str){ ...... } 2 ...

  3. PS常用快捷键(收藏)

    一.工具箱(多种工具共用一个快捷键的可同时按[Shift]加此快捷键选取) 矩形.椭圆选框工具 [M] 移动工具 [V] 套索.多边形套索.磁性套索 [L] 魔棒工具 [W] 裁剪工具 [C] 切片工 ...

  4. effective C++学习一(仅供个人学习记录,本文摘录effective C++)

    条款 1:尽量用 const 和 inline 而不用#define   #define ASPECT_RATIO 1.653 编译器会永远也看不到 ASPECT_RATIO 这个符号名,因为在源码进 ...

  5. C# WInForm中 窗体的this.width和this.height的属性值不能大于显示器的最大分辨率

    最近在做一个小项目的时候,发现在 1680x1050 分辨率显示器上写的代码,将窗体的宽度和高度 设置成了 1600×900,在高于1600×900的分辨率上缩放显示很正常, 而后转移到 分辨率低于 ...

  6. asp.net导出excle

    思路:实际上是读取页面上某个控件下的内容再导出 protected void btnExcel_Click(object sender, EventArgs e) { string bgType = ...

  7. Mysql 表约束 非空、唯一、主键、自增长、默认、外键约束(基础6)

    非空(not null).唯一(unique key).主键(primary key).自增长(auto_increment).默认约束(default) 准备基础环境: mysql> crea ...

  8. python全栈开发 什么是python python命名及循环

    python全栈 一.  python介绍: 1.    python起源 2.    主要应用领域; web,人工智能,云计算,系统运维. 1.1   python是一门什么语言? python是一 ...

  9. Django常用的模板标签

    django 目前了解的各个文件的作用: manage.py:  运行服务 urls: 路由 views: 处理数据 传递给 html模板 html文件:  通过 {{变量名}}接收变量 通过 模板标 ...

  10. Vue之常用语法

    变量的定义: var定义的变量:只有全局作用域和函数作用域.有变量提升,先打印后定义变量不会报错,打印结果为undefined let定义的变量:没有变量提升             ——>有局 ...