css3旋转

2D转换方法：在平面对元素进行旋转，缩放，移动，拉伸。 ㈠浏览器支持 ⑴2D转换效果有以下的浏览器支持： ⑵在编辑代码的时候要注明用哪种浏览器打开，在前面加上前缀，下面是编辑器的简写形式，以及前缀名： ㈡ transform 属性 ⑴rotate() 进行旋转的函数 ⑵scale() 进行缩放的函数 ㈢旋转 transform：rotate（） ⑴rotate函数可以设置旋转的角度，在括号里带有的参数，就是它的角度，单位是deg（degree），设置角度的值，可以是正值，也可以是负值。如果是正值，那么就是顺时针地旋转，如果是负值，就是逆时针旋转。 ⑵例如：做两个盒子，第一个盒子是正常显示的，第二个盒子是旋转一定角度的。第一个盒子用div标签完成，第二个盒子是引用了一个ID类型的样式，这个样式的名字就是rotateDiv。看一下样式的定义，两个盒子共同的样式：在div标签作为样式的名字，里面来定义它的高度，宽度，背景颜色和边框。第一个盒子就按上面的样式正常显示出来，第二个盒子显示的方式在rotateDiv里面，采用transform这个属性设置为rotate函数，顺时针旋转30度。 ⑶代码及效果如下图所示： 效果图： ㈣缩放 transform：scale（） ⑴ transform：scale（x,y） 可以设置水平，垂直方向两个值，具体如下图所述： ⑵

新入博客园，发点以前写的东西占个位先 效果： html: < div class ="a1" > < div class ="b1" ></ div > < div class ="c1" > < div class ="c2" ></ div > </ div > < div class ="d1" > < div class ="d2" ></ div > </ div > </ div > css: * { margin : 0 ; padding : 0 ;} body { background-color : #000 ;} .a1 { position : relative ; width : 500px ; height : 500px ; overflow : hidden ; margin : 50px auto 0 ; background-color : #FFFFFF ; border-radius : 50% ; box-shadow : 0 0 50px #FFFFFF ; -webkit-transition : all 3s ease-in ; -moz-transition : all 3s ease-in ;} .d1 { position : absolute ; top : 50% ; right : 25% ; width : 50% ;