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的几个属性和文字翻页效果练习_第1张图片

CSS3-文字翻页效果代码:CSS3的几个属性和文字翻页效果练习_第2张图片

你可能感兴趣的:(CSS)