关键词：
transfrom
transform，翻译成中文的含义是“改变，使…变形；转换”，用于向元素应用2D或3D 转换。
transform属性的基本语法如下所示：
transform：none | transform-functions;
属性一：默认值为none，适用于内联元素和块元素，表示不进行变形。
属性二：用于设置变形函数，可以是一个或多个变形函数列表。
2D转换
transform-functions的常用于2D转换的函数说明如下表所示。
案例代码
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>CSS3 2D转换</title>
<style>
.demo
margin: 25px;
padding: 0;
width: 150px;
height: 50px;
background-color: #2bab79;
font-weight: bold;
font-size: larger;
float: left;
.trans1
transform:rotate(30deg);
.trans2
transform:skew(30deg);
.trans3
transform:scale(0.8);
.trans4
transform:translate(5px,50px);
/*教材元素旋转对比截图部分的代码*/
/*.demo*/
/*margin: 50px;*/
/*padding:0px;*/
/*width: 150px;*/
/*height: 50px;*/
/*background-color: rgba(255, 177, 81, 0.02);*/
/*font-weight: bold;*/
/*font-size: larger;*/
/*border: 1px dashed;*/
/**/
/*.trans*/
/*margin: 0px;*/
/*padding: 0;*/
/*width: 150px;*/
/*height: 50px;*/
/*background-color: #2bab79;*/
/*transform:rotate(30deg) ;*/
/*transform-origin: left 0 0 ;*/
/**/
</style>
</head>
<body>
<div class="demo">不设置变形</div>
<div class="demo trans1">rotate(30deg)</div>
<div class="demo trans2">skew(30deg)</div>
<div class="demo trans3">scale(0.8)</div>
<div class="demo trans4">translate(5,50px)</div>
<!--教材元素旋转对比截图部分的代码-->
<!--<div class="demo"><div class="trans">rotate(30deg)</div></span></div>-->
</body>
</html>
效果图
元素变形原点
元素的变形都有一个原点，元素围绕着这个点进行变形或者旋转，默认的起始位置是元素的中心位置。
CSS 变形使用transform-origin属性指定元素变形基于的原点，语法格式具体如下：
transform-origin: x-axis y-axis z-axis;
transform-origin最多接受三个值，分别是x轴、y轴和z轴的偏移量。
transform-origin的参数说明如下表所示。
注意：transform-origin的三个参数均为可选参数，参数值为0px时可以省略不写。
3D转换
3D 变形是指某个元素围绕其x轴、y轴、z轴进行旋转，transform-functions的常用于3D转换的函数说明如下表所示。
3D转换——案例
perspective属性的透视效果就是用于实现视觉上的3D效果的，接下来看一个典型的案例——立方体，页面效果如下所示。
案例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS 3D转换</title>
<style>
body
margin: 0;
padding: 0;
background-color: #F7F7F7;
.box
width: 200px;
height: 200px;
text-align: center;
line-height: 200px;
font-size: 24px;
margin: 100px auto;
position: relative;
perspective: 1000px;
transform-style: preserve-3d;
transform: rotateX(-30deg) rotateY(30deg);
.front, .back, .left, .right, .top , .bottom
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
opacity: 0.5;
.front
background-color: pink;
transform: translateZ(100px);
.left
background-color: green;
transform: rotateY(90deg) translateZ(-100px);
.right
background-color: red;
transform: rotateY(-90deg) translateZ(-100px);
.top
background-color: blue;
transform: rotateX(90deg) translateZ(100px);
.bottom
background-color: yellow;
transform: rotateX(-90deg) translateZ(100px);
.back
background-color: purple;
transform: translateZ(-100px);
</style>
</head>
<body>
<div class="box">
<div class="front">front</div>
<div class="back">back</div>
<div class="left">left</div>
<div class="right">right</div>
<div class="top">top</div>
<div class="bottom">bottom</div>
</div>
</body>
</html>
深入理解css变形transform(2d)
...录[1]变形原点[2]变形函数[3]多值前面的话 CSS变形transform是一些效果的集合，主要是移动、旋转、缩放和倾斜这四种基本操作，还可以通过设置matrix矩阵来实现更复杂的效果。变形transform可以实现2D和3D两种效果。2D变形涉... 查看详情
2d变形
...，它主要通过CSS控制元素样式属性值的变化来实现。利用transform功能来实现文字或图像的旋转、缩放、倾斜和移动这4种类型的变形处理。transform实现了一些可用SVG实现的变形功能，transform属性的基本语法如下所示：transform：none|... 查看详情
前端基础学习css新特性之变形
变形2D变形旋转变形将transform属性的值设置为rotate()，即可实现旋转变形；transform:rotate(45deg);若角度为正，这顺时针方向旋转，否则逆时针方向旋转；transform-origin属性可以使用transform-origin属性设置自己的自定... 查看详情
css3动画属性有哪些
CSS3-2D（二维平面空间）1.CSS3-2D变形：变形属性：transform;变形属性属性值：在平面内进行位置的移动：transform:translate(value值1，value值2) value值一般是以像素和百分比做单位，value值1：在X轴移动的距离，value值2：在Y轴移动... 查看详情
前端基础学习css新特性之变形(代码片段)
变形2D变形旋转变形将transform属性的值设置为rotate()，即可实现旋转变形；transform:rotate(45deg);若角度为正，这顺时针方向旋转，否则逆时针方向旋转；transform-origin属性可以使用transform-origin属性设置自己的自定... 查看详情
css32d转换效果
CSS中的2D变形主要用transform属性来实现，其可以用来控制元素的变形，如移动，比例化，反过来，旋转，和拉伸。transform属性的基本语法如下1.translate（）移动元素，即基于X和Y坐标重新定义元素位置。用法如下：transform:translate(3... 查看详情
第九章
1.CSS3制作网页动画（1）变形简介①CSS通过transform实现变形，它可以作用在块级42元素和行内元素，作旋转、缩放、移动②语法:transform:[transform-function]transform-function：设置变形函数，可以是一个或多个，多个使用空格隔开（2）常... 查看详情
深入理解css变形transform(3d)
坐标轴在了解透视之前，首先要先了解坐标轴。3D变形与2D变形最大的不同就在于其参考的坐标轴不同。2D变形的坐标轴是平面的，只存在x轴和y轴，而3D变形的坐标轴则是x、y、z三条轴组成的立体空间，x轴正向、y轴正向、z轴正... 查看详情
变形属性transform
transform功能可以实现文字或图像的旋转、绽放、倾斜、与移动； 注意点：1、其移动、旋转、倾斜、与绽放这4种效果的使用先后顺序不同，页面会显示不同的结果； 2、属性值有一个参数与有多个参数的... 查看详情
css3的2d变形
一、2D变形 1、变形 transform:translate();translateX();translateY();translate(,); 2、过渡 transition:all1s;二、具体体现的例子 1、位移的实例 <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8 查看详情
css变形几大属性
1、transform:transform-function()*|none; transform-function:translate()、scale()、rotate()、skew()、matrix()。2、transform-origin：用来指定元素的中心位置。 css3中的旋转、缩放、倾斜都可以通过transform-origin重置元素的原点，但其中的位移transla... 查看详情
css3transform
CSStransform属性（变形，改变）允许你修改CSS视觉格式模型的坐标空间。使用它，元素可以被translate（转换），rotate（旋转），scale（缩放），skew（倾斜）需要特别强调一点：transform属性只对块级元素生效（有些大牛博客说对内联... 查看详情
css3里的2d/3d转换
...度。负的为逆时针转动，默认沿着中心点旋转。可以利用transform-origin设置旋转原点。transform:rotate(30deg);2.用来设置变形原点，变形时以这个点为基准点，默认为50%50%。transform-origin:100%0;3.平移变形，两个参数分别为横向偏移量和... 查看详情
css3中的transition，transform，translate区别和作用
transform和translatetransform指变换、变形，是css3的一个属性，和其他width，height属性一样translate 是transform的属性值，是指元素进行2D变换，2D变换就是指，元素以当前位置（0,0）按照x轴的方向移动多少，按照y轴的方向移动多少&nb... 查看详情
css3transition和transform的应用
...己的值4.transition-delay延迟执行过渡的时间默认值为0s二、transform属性transform向元素应用2D或3D转换只对block级元素生效1.translate位移translateX()在x轴上发生位移或者变形translateY()在y轴上发生位移或者变形translate(x,y)在x轴，y轴上发生... 查看详情
css属性制作动画
...平移、旋转、缩放、倾斜效果每个效果都可以称为变形（transform），它们可以分别操控元素发生平移、旋转、缩放、倾斜等变化语法：transform:[transform-function]*;设置变形函数，可以是一个，也可以是多个，中间以空格分开变 查看详情
第24章css3变形效果（上）
第24章CSS3变形效果[上]学习要点：1.transform2.transform-origin3.浏览器版本本章主要探讨HTML5中CSS3的变形效果，通过变形效果，可以平移、缩放和旋转元素的功能。一．transformCSS3提供了元素变形效果，也叫做变换。它可以将元素实现... 查看详情
css3学习——transform2d转换
首先声明一点，transform属性不为none的元素是它的定位子元素（绝对定位和固定定位）的包含块，而且对内创建一个新的层叠上下文。注意：可以通过transform-box属性指定元素的那个盒子发生了变换，该属性的默认值是“border-box”... 查看详情