下载文档原格式
css3简介及引用的三种方式CSS3 是 CSS（层叠样式表）的最新版本，它在 CSS2 的基础上进行了扩展和改进，增加了许多新的特性和功能。
CSS3 的目标是提供更加丰富和灵活的样式控制，以满足现代网页设计和开发的需求。
CSS3 引入了许多新的特性，例如：- 盒模型：CSS3 引入了新的盒模型，包括边界半径、盒阴影和媒体查询等。
- 动画：CSS3 提供了各种动画效果，例如平移、旋转和缩放等。
- 变形：CSS3 允许对元素进行变形操作，例如倾斜和扭曲等。
- 字体：CSS3 提供了更多的字体控制选项，包括字体样式、字体家族和字体大小等。
- 颜色：CSS3 增加了对颜色的更多控制，包括RGB、HSL 和透明度等。
CSS3 的引用方式有以下三种：1. 内联样式：将 CSS 样式直接嵌入到 HTML 元素的标签中，使用`style`属性。
例如：```html<p style="color: red;">这是内联样式</p>```2. 内部样式表：将 CSS 样式代码写在 HTML 文件的`<style>`标签中。
例如：```html<style>p {color: red;}</style>```3. 外部样式表：将 CSS 样式代码保存为一个独立的文件（.css 扩展名），然后在 HTML 文件中使用`<link>`标签引入。
例如：```html<link rel="stylesheet" type="text/css" href="styles.css">```其中，外部样式表是最常用的方式，因为它可以实现样式的重用和维护。
你可以在多个HTML 文件中引用同一个外部样式表，从而保持整个网站的样式统一。
CSS3 的出现使得网页设计更加丰富多彩，同时也提高了开发效率和用户体验。
css3的动画特效--动画序列（animation）⾸先复习⼀下animation动画添加各种参数（1）infinite参数，表⽰动画将⽆限循环。
在速度曲线和播放次数之间还可以插⼊⼀个时间参数，⽤以设置动画延迟的时间。
如希望使图标在1秒钟后再开始旋转，并旋转两次，代码如下.close:hover::before{-webkit-animation: spin 1s linear 1s 2;animation: spin 1s linear 1s 2;}（2）alternate参数。
animation动画中加⼊反向播放参数alternate。
在加⼊该参数后，动画将在偶数次数时反向播放动画。
.close:hover::before{-webkit-animation: spin 1s linear 1s 2 alternate;animation: spin 1s linear 1s 2 alternate;}animation属性参数中，延迟参数是我们较为常⽤的⼀种参数。
当动画的对象为多个时，我们常常⽤延迟参数来形成动画序列。
如以下代码定义了5个不同的图标：<span class="close icon-suningliujinyun">Close</span><span class="close icon-shousuo">Close</span><span class="close icon-zhankai">Close</span><span class="close icon-diaoyonglian">Close</span><span class="close icon-lingshouyun">Close</span>图标的基本样式和之前的Close图标⼀致，不同之处在于此处的图标都设置为inline-block，使它们能够横向排列。
网页设计中的交互动效实现技术在网页设计中，交互动效实现技术是非常重要的一环。
通过动效的运用，可以让网页更加生动、具有吸引力，同时也能提升用户体验，增加用户的互动性和参与感。
下面就让我们来了解一些在网页设计中常用的交互动效实现技术。
首先，CSS3是网页设计中常用的交互动效实现技术之一。
通过CSS3的动画效果，可以实现页面元素的过渡、缩放、旋转、渐变等各种动画效果。
通过简单的CSS属性设置，就能够实现出色的交互动效，同时也有助于提升网页性能和加载速度。
比如，可以通过transition属性来实现元素的平滑过渡效果，通过transform属性来实现元素的变形效果，通过animation属性来实现元素的动画播放效果。
这些都是利用CSS3技术实现的交互动效，简单易用且效果出众。
其次，JavaScript也是实现网页交互动效的重要技术。
通过JavaScript可以实现更加复杂和个性化的动效效果，同时也可以实现与用户的交互功能。
比如，可以通过JavaScript来实现鼠标悬停、点击、拖拽等各种交互效果，让用户更加直观地感受到网页的动态互动。
另外，JavaScript还可以结合CSS3技术来实现更加炫酷的动画效果，比如使用JavaScript库如jQuery或者Animate.css来简化代码编写，快速实现各种动画效果。
还有一种常用的交互动效实现技术是SVG（可缩放矢量图形）。
SVG不仅可以用来绘制图形和图表，还可以用来实现交互动效。
通过SVG的路径动画和变形功能，可以实现各种炫酷的动效效果，比如路径的延展、缩放和旋转等。
同时，SVG还支持事件绑定和交互功能，可以实现点击、拖拽等交互效果，使用户可以更加直观地操作网页内容，提升用户体验。
另外，HTML5也提供了一些新的特性和API，可以帮助设计师实现更加复杂和丰富的交互动效。
比如，HTML5的Canvas和WebGL技术可以实现更加复杂的图形和动画效果，同时还有WebRTC、WebVR等技术可以实现实时通信和虚拟现实等功能，为网页设计师提供更多可能性。
Web前端技术-第章 CSS新增动画特效含答案(二)- CSS新增动画特效含答案 -1. CSS3动画的基本概念CSS3动画是指利用CSS3技术实现的页面元素动态效果，包括过渡、变形、旋转、平移、缩放、透明度等。
CSS3动画具有兼容性好、效果丰富、代码简洁等优点，被广泛应用于网页设计中。
2. CSS3动画的基本语法CSS3动画的基本语法包括关键帧、动画属性和动画执行时间。
其中，关键帧定义了动画开始和结束时的状态，动画属性定义了动画的表现形式，动画执行时间定义了动画的持续时间。
3. CSS3动画的实现方法CSS3动画的实现方法主要有两种：一种是利用CSS3的transition属性实现简单的动画效果，另一种是利用CSS3的animation属性实现更加复杂的动画效果。
4. CSS3动画的应用场景CSS3动画可以应用于网页设计的各个方面，如导航菜单、图片轮播、页面切换等。
在实际应用中，需要根据具体的需求选择合适的动画效果，以达到最佳的视觉效果和用户体验。
5. CSS3动画的常见问题及解决方法在使用CSS3动画时，常见的问题包括兼容性、性能、代码复杂度等。
为了解决这些问题，可以采取以下措施：使用浏览器前缀、优化代码、减少动画执行时间等。
6. CSS3动画的优化技巧为了提高CSS3动画的性能和效果，可以采取一些优化技巧，如使用硬件加速、合理设置动画属性、避免频繁重绘等。
这些技巧可以有效提升网页的加载速度和用户体验。
7. CSS3动画的未来发展趋势随着互联网技术的不断发展，CSS3动画也在不断更新和完善。
未来，CSS3动画将更加智能化、个性化和实用化，为网页设计带来更加丰富和多样的视觉效果和交互体验。
总之，CSS3动画是一种非常实用和有趣的网页设计技术，可以为网页带来更加生动和动态的视觉效果，提高用户体验和品牌形象。
希望本文对您有所帮助，欢迎大家多多学习和应用。
CSS3中的过渡、动画和变换⼀、过渡 过渡效果⼀般由浏览器直接改变元素的CSS属性实现。
a、transition属性 transition 属性是⼀个简写属性，⽤于设置四个过渡属性：transition-propertytransition-durationtransition-timing-functiontransition-delay 注释：请始终设置 transition-duration 属性，否则时长为 0，就不会产⽣过渡效果。
1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>Document</title>6<style type="text/css">7 div{8 width: 100px;9 height: 100px;10 background: blue;11 transition: width 2s,background 3s,3S linear 3s;12 }13 div:hover{14 width: 300px;15 background: red;16 transition: width,background, 3s linear 2s;17 }18</style>19</head>20<body>21<div>2223</div>24</body>25</html> 可以设置设置某个属性的过渡持续时间（transition: width 2s,background 3s,3s linear 3s;），也可以设置所有的属性的过渡的持续时间（transition: width,background, 3s linear 2s）属性值和时间必须⽤逗号隔开; b、transition-property transition-property 属性规定应⽤过渡效果的 CSS 属性的名称。
css3中的变形（transform）、过渡（transtion）、动画（animation）字⾯上就是变形，改变的意思。
在中主要包括以下⼏种：旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。
下⾯我们⼀起来看看CSS3中transform的旋转rotate、扭曲skew、缩放scale和移动translate具体如何实现，⽼样⼦，我们就从的语法开始吧。
是构成transtion和animation的基础。
语法：transform ： none | <transform-function> [ <transform-function> ]*也就是：transform: rotate | scale | skew | translate |matrix;none:表⽰不进么变换；<transform-function>表⽰⼀个或多个变换函数，以空格分开；换句话说就是我们同时对⼀个元素进⾏transform的多种属性操作，例如rotate、scale、translate三种，但这⾥需要提醒⼤家的，以往我们叠加效果都是⽤逗号（“，”）隔开，但transform中使⽤多个属性时却需要有空格隔开。
⼤家记住了是空格隔开。
取值：transform属性实现了⼀些可⽤SVG实现的同样的功能。
它可⽤于内联(inline)元素和块级(block)元素。
它允许我们旋转、缩放和移动元素，他有⼏个属性值参数：rotate;translate;scale;skew;matrix。
下⾯我们分别来介绍这⼏个属性值参数的具体使⽤⽅法：⼀、旋转rotaterotate(<angle>) ：通过指定的⾓度参数对原元素指定⼀个（2D 旋转），需先有transform-origin属性的定义。
transform-origin定义的是旋转的基点，其中angle是指旋转⾓度，如果设置的值为正数表⽰顺时针旋转，如果设置的值为负数，则表⽰逆时针旋转。
使用CSS实现动画效果的方法CSS（Cascading Style Sheets）是一种用于定义网页样式和布局的语言，它可以使网页看起来更加美观和动态。
在网页设计中，使用CSS实现动画效果是非常常见的，它可以为用户呈现更加生动的网页内容，提升用户体验。
实现动画效果的方法有多种，下面将介绍几种常用的方法：1. 使用CSS3动画：CSS3提供了丰富的动画特效，可以通过@keyframes规则来实现动画效果。
@keyframes规则定义了动画序列中的关键帧，通过控制关键帧之间的过渡效果来实现动画效果。
例如，通过定义@keyframes规则来控制图像的位移、旋转或缩放等属性，就可以实现各种动态效果。
2. 使用transition属性：transition属性可以为元素的属性值变化设置动画效果，当元素属性值发生变化时，会平滑地过渡到新的属性值。
通过设置transition属性，可以实现元素在状态变化时的平滑过渡效果，如:hover伪类、点击事件等。
transition属性可以控制属性值的过渡时长、过渡速度函数等属性，使动画效果更加自然。
3. 使用transform属性：transform属性可以对元素进行旋转、缩放、平移等变换操作，通过结合transition属性，可以实现更加复杂的动画效果。
例如，可以通过设置transform：rotate(45deg)来使元素旋转45度，设置transform：scale(1.5)来使元素放大1.5倍等。
4. 使用animation属性：animation属性可以方便地定义复杂的动画效果，通过设置animation-name、animation-duration、animation-timing-function、animation-iteration-count等属性，可以实现多样化的动画效果。
animation属性还可以结合@keyframes规则来定义动画序列，实现更加复杂的动画效果。
CSS3使⽤transition属性实现过渡效果⽬的是让css的⼀些属性（如background）的以平滑过渡的效果出现。
它是⼀个合并属性，是由以下四个属性组合⽽成：transition-property：设置应⽤过渡的CSS属性，如background。
transition-duration：设置过渡效果花费的时间。
默认是 0。
transition-timing-function：设置过渡效果的时间曲线。
默认是 "ease"。
transition-delay：规定过渡效果何时开始。
默认是 0。
⽰例：1 2 3 4button{transition: background 1s;-webkit-transition: background 1s; /* Safari */ }定义transition属性时，transition-property和transition-duration是必选，其他两个为可选。
transition-property和transition-durationtransition-property⽤来指定应⽤过渡效果的CSS属性，这些属性包括（可能不全）：widthheightcolorbackground (color, image, position)transform (in the next post)border (color, width)position (top, bottom, left, right )text (size, weight, shadow, word-spacing)marginpaddingopacityvisibilityz-indexalltransition-duration属性⽤来设置指定属性的过渡效果花费时间，可以是秒（s）或者毫秒（ms）。
transition-delay和transition-timing-functiontransition-delay⽤来设置过渡效果开始的时间，默认为0，可以是秒（s）或者毫秒（ms）。
前端开发技术中常见的网页动画和交互效果实现随着互联网的发展，网页设计也愈发注重用户体验。
在前端开发中，网页动画和交互效果的实现成为了一个不可或缺的部分。
本文将介绍一些常见的网页动画和交互效果实现的技术和方法。
一、CSS3动画CSS3为前端开发带来了丰富的动画效果，包括对元素的旋转、缩放、渐变、过渡等的控制。
通过使用CSS3的关键帧动画和过渡属性，我们可以轻松地实现各种动画效果。
例如，通过设置元素的transform属性和transition属性，我们可以制作一个旋转的图片动画。
通过添加一些定义好的关键帧，我们还可以实现一个动态的渐变背景。
二、JavaScript动画库在实现一些复杂的网页动画效果时，CSS3可能会受限于性能的因素。
这时候，我们就可以使用JavaScript动画库来实现更加灵活和复杂的动画效果。
例如，GSAP（GreenSock Animation Platform）是一个功能强大的JavaScript动画库，可以用来创建流畅的、高性能的动画效果。
GSAP提供了丰富的API和插件，可以实现各种复杂的动画效果，如滚动触发动画、鼠标交互动画等。
三、滚动交互效果滚动交互效果是一种在网页上滚动时触发的动画效果。
通过监听滚动事件，我们可以根据滚动的位置和方向来触发不同的动画效果。
例如，我们可以创建一个滚动触发动画，当用户向下滚动到某个特定位置时，元素会显示出来并且逐渐展示出动画效果。
这种滚动交互效果可以很好地提升用户的体验，使网页内容更加生动有趣。
四、鼠标交互效果鼠标交互效果是利用用户的鼠标行为来触发的动画效果。
通过监听鼠标事件，我们可以实现各种吸引人的鼠标交互效果。
例如，当用户将鼠标移动到一个按钮上时，可以通过改变按钮的样式或位置来给用户一种反馈。
还可以利用鼠标的拖拽动作来实现一些有趣的效果，比如拖拽移动一个元素或改变元素的大小。
五、响应式交互效果随着移动设备的流行，响应式设计已经成为了一个重要的趋势。
css3变形褶皱CSS3变形褶皱是一种通过CSS3的变形属性来实现网页中褶皱效果的技术。
它可以让网页元素在视觉上呈现出类似纸张褶皱的效果，给网页增加了动感和层次感。
在本文中，我将详细介绍CSS3变形褶皱的原理、实现方法以及常用的效果。
首先，我将介绍CSS3中用于实现变形褶皱效果的属性，主要有transform、transform-origin、transition和perspective。
1. transform属性：transform属性是CSS3中用于设置元素的变形效果的属性，可以实现元素的旋转、缩放、倾斜和位移等效果。
在实现变形褶皱效果时，我们可以使用rotateX、rotateY、skewX和skewY等变形函数来模拟纸张的褶皱效果。
2. transform-origin属性：transform-origin属性用于设置元素的变形原点，即变形操作的参考点。
在实现褶皱效果时，我们可以通过调整变形原点的位置，使元素的变形效果更加真实。
3. transition属性：transition属性用于设置元素的过渡效果，控制元素在变形过程中的平滑过渡。
通过设置transition属性，我们可以实现元素的平滑褶皱过渡效果。
4. perspective属性：perspective属性用于设置元素在3D环境中的透视效果。
在实现立体褶皱效果时，我们可以通过设置透视效果，让元素在变形过程中呈现出立体感。
接下来，我将介绍实现CSS3变形褶皱效果的方法。
1.使用transform属性：我们可以使用rotateX、rotateY和skewX等变形函数来模拟纸张的褶皱效果。
通过设置不同的变形角度和比例，可以实现不同形状和程度的褶皱效果。
2.使用transition属性：我们可以使用transition属性控制元素的过渡效果，使褶皱效果在一定时间内平滑过渡。
通过设置不同的过渡时间和过渡函数，可以实现不同的过渡效果。
3.使用perspective属性：我们可以使用perspective属性设置元素在3D环境中的透视效果。
CSS3过渡效果（css3transition）CSS3的出现最引⼈注意的地⽅莫过于css动画（CSS Animation）了，⽽css3过渡（CSS Transition）让动画变的⽣动更逼真。
今天就带⼤家⼀起来认识⼀下CSS Transition。
CSS3 Transitions有了它，我们从⼀种效果转换到另⼀种效果⽽⽆需javascript或flash,我们只需⼀段CSS代码⽽已。
浏览器⽀持属性浏览器transitionInternet Explorer不⽀持过渡属性。
Firefox4需要前缀-moz-。
Chrome和Safari需要前缀-webkit-。
Opera需要前缀-o-。
它是如何⼯作？CSS3的过渡效果，让⼀个元素从⼀种效果转换到另⼀种效果。
要做到这⼀点，你必须指定两件事：1. 指定要添加效果的CSS属性2. 指定效果的持续时间。
举例说明：div{transition:width 2s;-moz-transition:width 2s;/* Firefox 4 */-webkit-transition:width 2s;/* Safari and Chrome */-o-transition:width 2s;/* Opera */}注意：如果未指定动画延迟时间，过渡将没有任何效果，因为默认值是0。
⿏标放上去的时候，变换开始：div:hover{width:300px;}在哪⾥定义动画效果？css3动画⼀般通过⿏标事件或者说状态定义动画，通常我们可以⽤CSS中伪类中伪类和js中的⿏标事件来定义。
动态伪类起作⽤的元素起作⽤的元素描述动态伪类:link只有链接未访问的链接:visited只有链接访问过的链接:hover所有元素⿏标经过元素:active所有元素⿏标点击元素:focus所有可被选中的元素元素被选中js的事件也可以，⽐如click，focus，mousemove,mouseover,mouseout等等transition的基本语法：css3动画通过transition属性和其他css属性（颜⾊，宽⾼，变形，位置等等）配合来实现。
CSS3中Transform动画属性⽤法详解css3在原来的基础上增加了变形和动画相关的属性，动画三兄弟：transform、transition和animation，通过使⽤这三个属性可以达到很炫酷的效果。
需要注意的是这三个属性都是css3新增的属性，各⼤浏览器⽀持⽅⾯还不是特别好，使⽤时要特别注意浏览器的兼容性，本⽂重点介绍Transform的使⽤⽅法，具体内容如下浏览器⽀持情况：Internet Explorer 10、Firefox、Opera ⽀持 transform 属性。
Internet Explorer 9 ⽀持替代的 -ms-transform 属性（仅适⽤于 2D 转换）。
Safari 和 Chrome ⽀持替代的 -webkit-transform 属性（3D 和 2D 转换）。
Opera 只⽀持 2D 转换。
2D transform变换⽅法•translate(x, y)⽅法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。
x, y的值可以取正负，分别表⽰表⽰向不同的⽅向偏移。
•rotate(angle)⽅法，表⽰旋转angle⾓度。
angle为正时，按顺时针⾓度旋转，为负值时，元素逆时针旋转。
•scale(x, y)⽅法，表⽰元素在x轴和y轴上的缩放⽐例，参数⼤于1时，元素放⼤，⼩于1时，元素缩⼩。
•skew(x-angle,y-angle)⽅法，⽤来对元素进⾏扭曲变⾏，第⼀个参数是⽔平⽅向扭曲⾓度，第⼆个参数是垂直⽅向扭曲⾓度。
其中第⼆个参数是可选参数，如果没有设置第⼆个参数，那么Y轴为0deg•matrix(n,n,n,n,n,n)⽅法，以⼀个含六值的变换矩阵的形式指定⼀个2D变换，此属性值使⽤涉及到数学中的矩阵，感兴趣的读者可以深⼊了解⼀下，这⾥就不做详细介绍了。
下⾯是上⾯⽅法的演⽰：XML/HTML Code复制内容到剪贴板1. <!DOCTYPE html>2. <html lang="en">3. <head>4. <meta charset="UTF-8">5. <title>transform 2D演⽰</title>6. <style type="text/css">7. #container{8. width: 700px;9. height: 120px;10. border: 1px solid blue;11. margin: 20px auto;12. padding: 20px 20px;13. }14. #div1 ,#div2, #div3, #div4{15. height: 100px;16. width: 100px;17. border: 1px dashed red;18. display: inline-block;19. }20. #div1 div{21. height: 100px;22. width: 100px;23. background: #63F7ED;24. transform:translate(20px,10px); /* W3C标准 */25. -ms-transform:translate(20px,10px); /* IE 9 */26. -moz-transform:translate(20px,10px); /* Firefox */27. -webkit-transform:translate(20px,10px); /* Safari 和 Chrome */28. -o-transform:translate(20px,10px); /* Opera */29. }30. #div2{margin-left: 50px;}31. #div2 div{32. height: 100px;33. width: 100px;34. background: #63F7ED;35. transform:rotate(45deg); /* W3C标准 */36. -ms-transform:rotate(45deg); /* IE 9 */37. -moz-transform:rotate(45deg); /* Firefox */38. -webkit-transform:rotate(45deg); /* Safari 和 Chrome */39. -o-transform:rotate(45deg); /* Opera */40. }41. #div3{margin-left: 100px;}42. #div3 div{43. height: 100px;44. width: 100px;45. background: #63F7ED;46. transform:scale(2,0.5); /* W3C标准 */47. -ms-transform:scale(2,0.5); /* IE 9 */48. -moz-transform:scale(2,0.5); /* Firefox */49. -webkit-transform:scale(2,0.5); /* Safari 和 Chrome */50. -o-transform:scale(2,0.5); /* Opera */51. }52. #div4{margin-left: 100px;}53. #div4 div{54. height: 100px;55. width: 100px;56. background: #63F7ED;57. transform:skew(30deg,-20deg); /* W3C标准 */58. -ms-transform:skew(30deg,-20deg); /* IE 9 */59. -moz-transform:skew(30deg,-20deg); /* Firefox */60. -webkit-transform:skew(30deg,-20deg); /* Safari 和 Chrome */61. -o-transform:skew(30deg,-20deg); /* Opera */62. }63.64. </style>65. </head>66. <body>67. <div id="container">68. <div id="div1">69. <div>translate</div>70. </div>71. <div id="div2">72. <div>rotate</div>73. </div>74. <div id="div3">75. <div>scale</div>76. </div>77. <div id="div4">78. <div>skew</div>79. </div>80. </div>81. </body>82. </html>83.效果如下：transform-origin 属性前⾯我们提到的transform的⽅法都是基于元素的中⼼来变换的，也就是元素变换的基点默认是元素的中⼼。
四个动效使用方法动效（Animation）是指通过一系列形象的变化来呈现动态效果，并且可以实现一定的交互功能。
它在设计领域中具有重要的作用，可以使设计更加有趣、生动、吸引人，并能够提升用户体验。
下面介绍四个动效的使用方法。
1. 过渡效果（Transitions）：过渡效果主要用于实现页面之间的平滑切换，使用户在页面之间的转换中感到舒适和流畅。
使用过渡动效可以减少页面间的断裂感，并且增强用户体验。
使用过渡效果的方法：1.定义过渡效果的触发条件，比如当用户点击一些按钮时，页面应该如何切换。
2.根据触发条件，在页面切换时添加相应的过渡动画，比如淡入淡出、平移、缩放等效果。
3. 使用CSS3的`transition`属性定义过渡效果的持续时间和动画效果。
2. 悬停效果（Hover Effects）：悬停效果可以在用户将鼠标悬停在一些元素上时添加视觉上的变化，以提高用户与界面的互动性。
它可以是动画、颜色变化、阴影效果等。
使用悬停效果的方法：1.选定需要添加悬停效果的元素，比如按钮、图片、链接等。
2. 使用CSS的`:hover`伪类选择器来定义悬停效果，如改变元素的颜色、大小、位置等属性。
3. 使用CSS3的过渡（transition）或变换（transform）属性，使悬停效果更加平滑和流畅。
3. 加载动画（Loading Animations）：加载动画用于在等待数据加载或页面加载过程中向用户展示进度，并且可以缓解用户等待的焦虑感。
它可以是旋转图标、逐渐填充的进度条、跳动的文字等。
使用加载动画的方法：1.添加一个占位符元素，用于展示加载动画。
3. 使用JavaScript控制动画的触发和停止，比如设置一个定时器，在一定时间后停止加载动画。
4. 触摸反馈效果（Touch Feedback）：触摸反馈效果用于在用户点击或触摸元素时提供视觉反馈，以增加用户交互的可感知性。
它可以是元素的颜色变化、阴影扩散、形状变换等。
css3中translate、transform和translation，以及动画anim。
example:元素整体居中：.box{position:absolute;top:50%;left:50%;width:50px;height:50px;transform:translate(-50%,-50%);background:gray;}1.translate:移动，是transform的⼀个⽅法通过translate()⽅法，元素从其当前位置移动，根据给定的left(x坐标)和top(y坐标)位置参数：⽤法transform: translate(50px, 100px);-ms-transform: translate(50px,100px);-webkit-transform: translate(50px,100px);-o-transform: translate(50px,100px);-moz-transform: translate(50px,100px);2. transform:变形，改变css3中主要包括：在css3中transform主要包括以下⼏种：旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。
旋转：rotate() 顺时针旋转给定的⾓度，允许负值rotate(30deg)扭曲：skew()元素翻转给定的⾓度，根据给定的⽔平线(x轴)和垂直线（Y轴）参数：skew(30deg,20deg)缩放：scale()放⼤或缩⼩，根据给定的宽度（X轴）和⾼度（Y轴）参数：scale(2,4)移动：translate()平移，传进x,,y值，代表沿x轴和y轴平移的距离所有的2D转换⽅法组合在⼀起： matrix()旋转、缩放移动以及倾斜元素matrix(scale.x,scale.y,translate.x,translate.y)改变起点位置 transform-origin: bottom left;transform: rotate旋转|scale缩放|skew扭曲|translate移动|matrix矩阵变形；综合起来使⽤：transform: 30deg 1.5 30deg 20deg 100px 200px;//需要有空格隔开3. transition: 允许css属性值在⼀定的时间区间内平滑的过渡。
【CSS3transform属性和过渡属性详解】CSS3transform属性详解transform字⾯上就是变形，改变的意思。
在CSS3中transform主要包括以下⼏种：旋转rotate、扭曲skew、缩放scale和移动translate以及矩阵变形matrix。
2D Transform ⽅法1. translate() 根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。
2. rotate() 在⼀个给定度数顺时针旋转的元素。
负值是允许的，这样是元素逆时针旋转。
3. scale() 该元素增加或减少的⼤⼩，取决于宽度（X轴）和⾼度（Y轴）的参数。
4. matrix() 和2D变换⽅法合并成⼀个。
matrix ⽅法有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。
5. skew()包含两个参数值，分别表⽰X轴和Y轴倾斜的⾓度，如果第⼆个参数为空，则默认为0，参数为负表⽰向相反⽅向倾斜。
skewX(<angle>);表⽰只在X轴(⽔平⽅向)倾斜。
skewY(<angle>);表⽰只在Y轴(垂直⽅向)倾斜。
下⾯我们⼀个个来介绍它们：⼀、移动translate1、translate(x,y) 定义 2D 转换，沿着 X 和 Y 轴移动元素。
如：translate : translate(100px,20px);2、translateX(n) 定义 2D 转换，沿着 X 轴移动元素。
如：transform:translateX(100px);3、translateY(n) 定义 2D 转换，沿着 Y 轴移动元素。
如：transform:translateY(20px);⼆、旋转rotaterotate(angle) 定义 2D 旋转，在参数中规定⾓度。
如：transform:rotate(30deg);三、缩放scale注意：默认值是1，它的值放⼤是⽐1⼤，缩⼩⽐1⼩。
