transform是什么？
transform的含义是：改变，使…变形；转换
CSS3
transform都有哪些常用属性？
transform的属性包括：rotate()
/
skew()
/
scale()
/
translate(,)
，分别还有x、y之分，比如：rotatex()
和
rotatey()
，以此类推。
下面我们来分解各个属性的用法：
transform:rotate()：
含义：旋转；其中“deg”是“度”的意思，如“10deg”表示“10度”下同。
.demo_transform1{-webkit-transform:rotate(10deg)-moz-transform:rotate(10deg)}
transform:skew()：
含义：倾斜；
.demo_transform2{-webkit-transform:skew(20deg)-moz-transform:skew(20deg)}
transform:scale()：
含义：比例；“1.5”表示以1.5的比例放大，如果要放大2倍，须写成“2.0”，缩小则为负“-”。
.demo_transform3{-webkit-transform:scale(1.5)-moz-transform:scale(1.5)}
transform:translate()：
含义：变动，位移；如下表示向右位移120像素，如果向上位移，把后面的“0”改个值就行，向左向下位移则为负“-”。
.demo_transform4{-webkit-transform:translate(120px,0)-moz-transform:translate(120px,0)}
transform综合：
transform的常用属性就是这些了，下面我们借助transition的帮忙来演示一个关于css3
transform的综合实例：
.demo_transform5{-webkit-transition:all
1s
ease-in-out-moz-transition:all
1s
ease-in-out}
.demo_transform5:hover{-webkit-transform:rotate(360deg)
skew(-20deg)
scale(3.0)translate(100px,0)-moz-transform:rotate(360deg)
skew(-20deg)sca
你可以将这段CSS改成:<styletype=“text/css”><!-- .a{text-decoration:none} --></style> 也就是在a的前面加上英文的句号,这样在使用的时候只有当你的Class = "a"时才会被调用,如下:<DIV align=center><A class = "a" href="<%=cityurl%>sca.asp"><font color="#FFFFFF" size="2" ><strong>商业机会</strong></font></A></DIV>
楼上的专家说的也是一种方法,不过这样来做的话每使用一次就要重写一次,也不是好方法,除非你保证只用一次.
直接上代码吧：
<!DOCTYPE html><html>
<head>
<meta name="viewport" content="initial-scale=1.0, width=device-width, user-scalable=no" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" />
<meta http-equiv="X-UA-Compatible" content="IE=8" />
<meta http-equiv="Content-Type" content="text/html charset=utf-8" />
<title>Map</title>
<style type="text/css">
html{height:100%}
body{height:100%width:100%margin:0padding:0}
/*渲染立方球 start*/
.drawCircle {font-weight: boldfont-size: 20pxcolor: rgba(255, 255, 255, 1)text-align: centerborder:noneposition: absolute
background: radial-gradient(circle farthest-side at 50% 12%, rgba(255, 255, 255, 1) 0, rgba(255, 255, 255, 1) 0, rgba(255, 255, 255, 1) 1%, rgba(255, 0, 0, 1) 100%)}
/*渲染立方球 end*/
</style>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=这个不能告诉你"></script>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div style="width:100%height:100%border:#ccc solid 1px" id="map_content"></div>
<script type="text/javascript">
//创建地图
var map = new BMap.Map("map_content",{minZoom:5})//在百度地图容器中创建一个地图
var point = new BMap.Point(110.8319,36.468476)//定义一个中心点坐标
map.centerAndZoom(point,5)//设定地图的中心点和坐标并将地图显示在地图容器中
//地图事件设置函数：
map.enableScrollWheelZoom()//启用地图滚轮放大缩小
map.enableKeyboard()//启用键盘上下左右键移动地图
//向地图中添加缩放控件
var ctrl_nav = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:BMAP_NAVIGATION_CONTROL_LARGE})
map.addControl(ctrl_nav)
//向地图中添加比例尺控件
var ctrl_sca = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT})
map.addControl(ctrl_sca)
// 定义自定义覆盖物的构造函数
function drawEarthPort(lng,lat,num){
this._center = new BMap.Point(lng,lat)
this._num = num
}
// 继承API的BMap.Overlay
drawEarthPort.prototype = new BMap.Overlay()
// 实现初始化方法
drawEarthPort.prototype.initialize = function(map){
// 保存map对象实例
this._map = map
// 创建div元素，作为自定义覆盖物的容器
var div = document.createElement("div")
var _width = 6 * this._num + "px"
var _font_size = 2 * this._num + "px"
$(div).addClass("drawCircle").text(this._num).css({
"width": _width,
"height": _width,
"border-radius": _width,
"line-height": _width,
"font-size": _font_size
})
// 将div添加到覆盖物容器中
map.getPanes().markerPane.appendChild(div)
this._div = div
this._width = parseInt(_width)
// 需要将div元素作为方法的返回值，当调用该覆盖物的show、hide方法，或者对覆盖物进行移除时，API都将操作此元素。
return div
}
// 实现绘制方法
drawEarthPort.prototype.draw = function(){
// 根据地理坐标转换为像素坐标，并设置给容器
var position = this._map.pointToOverlayPixel(this._center)
this._div.style.left = (position.x - this._width/2) + "px"
this._div.style.top = (position.y - this._width/2) + "px"
}
function drawSeismicOrigin(lng,lat,num){
var mySquare = new drawEarthPort(lng,lat,num)
map.addOverlay(mySquare)
}
// 测试用例
drawSeismicOrigin(114.8319,30.468476,5.7)
drawSeismicOrigin(112.8319,35.468476,4.9)
</script>
</body>
</html>
注释还是比较详细的。因为渐变的样式不兼容IE10以下的浏览器，所以请选择高版本或者用其他样式代替渐变。
