CSS中变形效果-transform（平移、旋转、缩放、倾斜）

CSS3实现变形的优势
2-D变形
- 平移translate（）
- 1、缩放scale()
- 2、倾斜skew()
- 3、旋转rotate()
- 4、中心点transform-origin
3-D变形
- 1、旋转rotate3d()
- 2、视距perspective
- 3、transform-style（用于保存元素的3D 空间）
- 4、backface-visibility（定义元素在不面对屏幕时是否可见
- 5、3D转换方法（位移，缩放）
兼容性

CSS3实现变形的优势

1、无需加载额外的文件。
2、提高了网页开发者的工作效率。
3、提高了页面的执行速度。
在 CSS3 之前，如果需要为页面设置变形效果，需要依赖于图片、Flash或JavaScript 才能完成。 CSS3 出现后，通过 transform属性就可以实现变形效果。 2012年10月， W3C 组织发布了CSS3变形工作草案，这个草案包括了 CSS3 2D变形和CSS3 3D变形。
变形效果：

CSS3的变形 transform）属性（可以让元素在一个坐标系统中变形。）
基本语法格式：

transform：none | transform-functions;
transform属性的默认值为 none ，适用于内联元素和块元素，表示不进行变形。transform-function用于设置变形函数，可以是一个或多个变形函数列表。

2-D变形

平移translate（）

使用translate（）方法能够重新定义元素的坐标，实现平移的效果。
基本语法格式：
transform:translate（x-value,y-value）;
x-value 指元素在水平方向上移动的距离， y-value 指元素在垂直方向上移动的距离。如果省略了第二个参数，则取默认值0 。当值为负数时，表示反方向移动元素。

平移示意图：

1、缩放scale()

scale() 方法用于缩放元素大小，该函数包含两个参数值，分别用来定义宽度和高度的缩放比例。
基本语法格式：
transform:scale(x-axis,y-axis);
x-axis 和 y-axis 参数值可以是正数、负数和小数。正数值表示基于指定的宽度和高度放大元素。负数值不会缩小元素，而是反转元素（如文字被反转），然后再缩放元素。如果第二个参数省略，则第二个参数等于第一个参数值。
缩放示意图：

2、倾斜skew()

skew()方法能够让元素倾斜显示，该函数包含两个参数值，分别用来定义X轴和Y轴坐标倾斜的角度。
基本语法格式：
transform:skew(x-angle,y-angle);
参数 x-angle 和 y-angle 表示角度值，第一个参数表示相对于 X轴进行倾斜，第二个参数表示相对于 Y轴进行倾斜，如果省略了第二个参数，则取默认值0。
倾斜示意图：

3、旋转rotate()

rotate()方法能够旋转指定的元素对象，主要在二维空间内进行操作。该方法中的参数允许传入负值，这时元素将逆时针旋转。
基本语法格式：
transform:rotate(angle);
参数 angle 表示要旋转的角度值。如果角度为正数值，则按照顺时针进行旋转，否则，按照逆时针旋转。
旋转示意图：

4、中心点transform-origin

变形操作都是以元素的中心点为基准进行的，如果需要改变这个中心点，可以使用 transform-origin属性。
基本语法格式：
transform-origin: x-axis y-axis z-axis;

transform-origin属性包含三个参数，其默认值分别为 50% 50% 0 ，各参数的具体含义如下：

3-D变形

1、旋转rotate3d()

基本语法格式：
rotate3d(x,y,z,angle);

x、y、z可以取值0或1，当要沿着某一轴转动，就将该轴的值设置为1，否则设置为0。Angle为要旋转的角度。

2、视距perspective

perspective属性可以简单的理解为视距，主要用于呈现良好的3D透视效果。例如我们前面设置的3D旋转果并不明显，就是没有设置perspective的原因。
基本语法格式：
perspective:参数值;
perspective 属性参数值可以为 none 或者数值（一般为像素），其透视效果由参数值决定，参数值越小，透视效果越突出。

3、transform-style（用于保存元素的3D 空间）

flat：子元素将不保留其 3D 位置。（默认属性）
preserve-3d子元素将保留其 3D 位置。

4、backface-visibility（定义元素在不面对屏幕时是否可见

）
visible：背面是可见的。
hidden：背面是不可见的。

5、3D转换方法（位移，缩放）

方法名称	描述
translate3d(x,y,z)	定义3D位移
translateX(x)	定义3D位移，仅使用用于 X 轴的值
translateY(y)	定义3D位移，仅使用用于 Y 轴的值
translateZ(z)	定义3D位移，仅使用用于Z 轴的值
scale3d(x,y,z)	定义 3D 缩放
scaleX(x)	定义 3D 缩放，通过给定一个 X 轴的值
scaleY(y)	定义 3D 缩放，通过给定一个 Y 轴的值
scaleZ(z)	定义 3D 缩放，通过给定一个 Z 轴的值

兼容性

CSS中变形效果-transform（平移、旋转、缩放、倾斜）相关推荐

三维空间中的几何变换-平移旋转缩放
前言前段时间由于项目需要,深入学习了下图形几何变换,主要是绕任意轴旋转部分(其他的已有一定基础),现记录学习笔记. 文章内容部分引用并参考了下面的博客: http://netclass.csu.ed ...
html文字旋转以后变形,关于css:CSS3中的变形处理transform功能旋转缩放倾斜移动
1 transform属性在CSS3中,能够利用transform性能实现文字或图像的旋转.缩放.歪斜.挪动这4中类型的变形解决. (1)浏览器反对到目前为止:Safari3.1以上.Chrome ...
CSS ——关于css中变形效果的案例解析
文章目录前言一.案例效果图二.实现过程 1.HTML结构 2.CSS样式总结前言本文主要介绍的是有关CSS中变形效果的案例解析,关于变形.动画等知识点的汇总在上一篇文章中有说过,欢迎感兴趣 ...
Unity 触屏手势控制Camera平移旋转缩放
Unity 触屏手势控制Camera平移旋转缩放实现思路单点触屏,位移增量控制相机平移: 两点触屏,两点位移控制相机前后移动(缩放):两点中一点不位移控制相机绕点旋转: 实现需要的API Touc ...
CSS 中鼠标悬停图片旋转
CSS 中鼠标悬停图片旋转 w3school 中 transfrom 说明主要使用的属性就是 transfrom 第一种情况 1.1 说明当鼠标放到图片上之后图片旋转, 这里的图片给的是背景图 ...
css圆在中心根据宽度缩放_根据CSS中的容器宽度重新缩放字体
css圆在中心根据宽度缩放 Introduction: 介绍: Dealing with fonts is a very interesting thing to do as fonts bring ...
Android中实现图片平移、缩放、旋转同步进行
转载请注明转自:noyet12的博客博客原址:http://blog.csdn.net/u012975705/article/details/49797911 源码下载地址: (github)htt ...
Unity矩阵平移旋转缩放Matrix4x4
Unity中的矩阵(Matrix4x4) 最近在研究帧同步定点数物理系统中需要自定义定点数矩阵,所以在这里分享下基础的矩阵案例旋转.平移.缩放.(注意这里本文中的transform组件式基于unity ...
CSS-0813(重复性)线性/径向渐变-过渡属性transition-变形属性transform变形位移旋转缩放倾斜视域函数perspective变形原点三角形居中方法
title: "CSS 0813-渐变&过渡&变形" date: 2022-08-15T09:43:28+08:00 文章目录 title: "CSS 0 ...

CSS中变形效果-transform（平移、旋转、缩放、倾斜）

CSS中变形效果-transform（平移、旋转、缩放、倾斜）

CSS3实现变形的优势

2-D变形

平移translate（）

1、缩放scale()

2、倾斜skew()

3、旋转rotate()

4、中心点transform-origin

3-D变形

1、旋转rotate3d()

2、视距perspective

3、transform-style（用于保存元素的3D 空间）

4、backface-visibility（定义元素在不面对屏幕时是否可见

5、3D转换方法（位移，缩放）

兼容性

CSS中变形效果-transform（平移、旋转、缩放、倾斜）相关推荐

最新文章

热门文章