在CSS3新增的属性中，transform可以实现2D屏幕旋转或偏移，如果对应的值是一个角度，会以中心位置进行旋转；如果是一个坐标位置，元素会实现偏移。下面利用实例说明，操作如下：
工具/原料
1
CSS3
2
HTML5
3
HBuilder
4
浏览器
5
截图工具
方法/步骤
1
第一步，双击打开HBuilder编辑工具，在body元素内插入一个div标签，并设置class属性，如下图所示：
2
第二步，利用hai选择器设置外间距、宽度、高度、背景渐变和椭圆角，如下图所示：
3
第三步，保存代码并查看界面显示的效果，可以看到一个椭圆图形，如下图所示：
4
第四步，再在选择器下方添加一个transform属性，值是使用rotate角度，如下图所示：
5
第五步，再次保存代码并预览效果，可以发现图形是以中心位置旋转90度，如下图所示：
6
第六步，如果将rotate改为translate，并给定XY轴偏移量，相当于移动了多少，如下图所示：
注意事项
1
注意CSS3中的transform属性取值不同，相对于元素旋转或偏移也不同
2
注意设置元素背景渐变属性和椭圆角属性
下一篇：高效率、简洁、CSS代码优化原则