概述:css3中的transform中有旋转,放缩,倾斜,平移的功能,分别对应的属性是:rotate,scale,skew,translate
1、旋转,利用rotate来实现,代码如下:
-webkit-transform:rotate(10deg)指定浏览器内核为webkit的翻转方式
-moz-transform:rotate(10deg)指定firefox浏览器私有属性
transform:rotate(10deg)一般浏览器翻转的角度为10弧度
2、 翻转,利用scale来实现,代码如下:
scale本来是放缩的意思,原来括弧里面(1,1)前者表示X轴,后者表示Y轴,当数字大于1时放大,大于0并小于1时缩小,负数代表翻转
水平翻转:
-webkit-transform:scale(-1,1)水平轴为-1,代表水平翻转
-moz-transform:scale(-1,1)水平轴为-1,代表水平翻转
transform:scale(-1,1)水平轴为-1,代表水平翻转
垂直翻转:
-webkit-transform:scale(1,-1)垂直轴为-1,代表垂直翻转
-moz-transform:scale(1,-1)垂直轴为-1,代表垂直翻转
transform:scale(1,-1)垂直轴为-1,代表垂直翻转
代码如下:
html:
<div id="div3">
<div class="arrow-top"></div>
</div>
css:
#div3 {
position: relative
width: 300px
height: 200px
background-color: yellow
}
.arrow-top {
position: absolute
top: -50px
left: -50px /*移动距离为小三角的宽高*/
width: 0px
height: 0px
border-width: 50px /*小三角的高度*/
border-style: solid
border-color: transparent transparent #C73837 transparent /*朝上的小三角*/
transform: rotate(-45deg) /*将小三角旋转到你想要的角度*/
}
你可以根据自己的需要进行微调
有三种方法可以实现CSS圆角。第一、直接写CSS代码:border-radius例如:border-radius:10px第二、四个圆角贴图;制作四个圆角的图片,然后用css定义
第三、直接制作整个矩形背景。总归而言,第一种方式最简单,只要一行代码。