在CSS3中，通过 transform 属性来使用 transform 功能。
使用 rotate 方法，在参数中加入角度值，角度值后面跟表示角度单位的 deg 文字即可，旋转方向为顺时针旋转。
运行效果：
使用 scale 方法来实现文字或图像的缩放处理，在参数中指定缩放倍率。
上面的示例使 div 元素缩小了50%。
另外，可以分别指定元素水平方向的放大倍率与垂直方向的放大倍率。
上面的示例使 div 元素水平方向缩小了50%，垂直方向放大了一倍。
效果如图：
使用 skew 方法来实现文字或图像的倾斜处理，在参数中分别指定水平方向上的倾斜角度与垂直方向上的倾斜角度。
上面的示例使 div 元素水平方向上倾斜了30度，垂直方向上倾斜了30度。
效果如图：
另外， skew 方法中的两个参数可以修改成只使用一个参数，省略另一个参数，这种情况下视为只在水平方向上进行倾斜，垂直方向上不倾斜。
使用 translate 方法来将文字或图像进行移动，在参数中分别指定水平方向上的移动距离与垂直方向上的移动距离。
上面的示例把 div 元素水平方向上向右移动了 50px ，垂直方向上向上移动了 50px 。
另外， translate 方法中的两个参数可以修改成只使用一个参数，省略另一个参数，这种情况下视为只在水平方向上进行移动，垂直方向上不移动。
示例1：
效果如图：
示例2：
效果如图：
这两个示例都是对同一个页面中同一个元素进行多重变形的示例， 而且各种变形方曲中所使用的参数也都相同，差别只是使用三种变形方法的先后顺序不一样。但，元素在两个页面上所处位置并不相同。说明 transform 参数的顺序不同，结果可能会不一样。
在使用 transform 方融进行文字或图像的变形时，是以元素的中心点为基准点进行的。使用 transform-origin 属性，可以改变变形的基准点。
接下来，我们使用 transform-origin 属性把变形的基准点修改为第二个元素的左下角处。
运行效果：
transform-origin 属性的两个参数分别代表：基准点在元素水平方向上的位置，基准点在元素垂直方向上的位置，其中"基准点在元素水平方向上的位置"中可以指定的值为 left 、 center 、 right ， "基准点在元素垂直方向上的位置"中可以指定的值为 top 、 center 、 bottom 。
CSS3高级属性可分为：选择器、盒模型、背景和边框、文字特效、2D/3D转换、动画、多列布局、用户界面。CSS边框和圆角transform：可以旋转、缩放、倾斜、平移的元素；border-radius：圆角；单独分离：border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius左上角，右上角，右下角，左下角。第一个值：左上角, 第二个值：右上角、左下角，第三个值：右下角第一个值：左上角、右下角，第二个值：右上角、左下角四个圆角值相同box-shadow：阴影；投影方式 X轴偏移量 Y轴偏移量 阴影模糊半径 阴影扩展半径 阴影颜色border-image:边框图片； background-image：多个图片路径；background-size：设置图片大小background-position：为多个图片路径设定位置；background-repeat：为多个路径设置图片显示是否重复；background-origin：指定图像的区域 background-clip:指定位置开始绘制。 注意：背景颜色只能设置一个background:图片路径 显示位置 是否重复，图片路径 显示位置 是否重复·········· CSS渐变色css有两种类型的渐变：线性渐变和径向渐变线性渐变：创建一个线性渐变，至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时，你也可以设置一个起点和一个方向（或一个角度）background：linear-gradient(颜色···········) 默认从上到下·background：linear-gradient(to right,颜色···········) 从左到右·background：linear-gradient(to left,颜色···········) 从右到左·background：linear-gradient(to top left ,颜色···········) 从右下到左上·也可以按照角度来渐变background: linear-gradient(0deg, red, blue)重复的线性渐变：background: repeating-linear-gradient(red, yellow 10%, green 20%)径向渐变：至少定义两种颜色结点。颜色结点即你想要呈现平稳过渡的颜色。同时，也可以指定渐变的中心、形状、大小。默认渐变的中心是 center，渐变的形状是 ellipse（椭圆形），渐变的大小是 farthest-corner（表示到最远的角落）。background: radial-gradient(位置,[形状], 颜色 【百分比】··················)CSS文本效果 文本属性：text-shadow：偏移量 向下大小 模糊度 颜色box-shadow：使用于盒子阴影word-wrap：break-word换行word-break：单词拆分换行属性指定换行white-space:处理元素中的空白这是你希望的效果吗：
<style rel="stylesheet" type="text/css">#div1 {
background-color: #000000
width: auto
height: 200px
transition: all 2s
}
#div1:hover {
margin-top: 100px
}
#div2 {
background-color: red
width: 200px
height: 200px
transition: all 3s
float: left
margin-left: -500px
}
#div2:hover {
transform: translate(650%, 0)
}
#move:hover {
transform: translate(90%, 0)
}
#move {
width: 500px
height: 200px
transition: all 3s
background-color: #333333
float: left
}
#div3 {
width: auto
height: 200px
background-color: green
transition: all 3s
clear: both
}
#div5:hover {
transform: translate(0, 100px)
background-color: yellow
}
</style>
