CSS3的几个属性和文字翻页效果练习

1.CSS3 2D转换transform

旋转度数rotate()

语法：transform:rotate(60deg);//顺时针旋转60度

绕轴旋转rotateX/Y/Z()

语法：rotateX(0deg) rotateX(30deg) rotateZ(0deg);//沿Y轴旋转30度

设置旋转轴transform-origin

语法：transform-origin:left center;

  transform:rotateX(0deg) rotateX(30deg) rotateZ(0deg);

//指定元素旋转轴为左侧，沿轴旋转30度

倾斜效果skew(x,y)

语法：skew(0deg,10deg);//x方向不变，y方向倾斜10度

缩放效果scale(x,y)

语法：scale(1.1,1);//x方向放大1.1倍，y方向不变

2.CSS3过渡效果 transition

语法：transition:变化的属性名称 花费的时间 运动方式 何时开始时间;

3.CSS3圆角效果 border-radius

语法：border-radius:50%;//圆形效果·

4.CSS3阴影效果 box-shadow

语法：box-shadow:水平 垂直 羽化 尺寸 颜色 内外;

透明度rgba()语法：rgba(0,0,0,0.5);//设置透明度为0.5

5.CSS文字阴影效果text-shadow

语法：text-shadow:水平 垂直 羽化 颜色;

6.综合练习：CSS3-文字翻页效果

CSS3-文字翻页效果代码：