【读书笔记】CSS3学习(三)
来源:互联网 发布:mac ruby安装目录 编辑:程序博客网 时间:2024/05/21 07:09
7.文本效果
CSS3文本效果主要包含多个新的文本特性,用来在正常的文本中实现一些额外的特性。
主要是两个属性的CSS3文本效果
1)text-shadow
文本阴影,指定了水平阴影,垂直阴影,模糊的距离,以及阴影的颜色。
h1{text-shadow: 5px 5px 5px #FF0000;}
2)word-wrap
换行,CSS3中自动换行属性允许强制文本换行, 即使这意味着会对单词进行拆分。
p {word-wrap:break-word;}
属性:
8.2D转换
1)translate()
translate()方法,根据左边(X轴)和顶部(Y轴)位置给定的参数,从当前元素位置移动;
div{transform: translate(50px,100px);-ms-transform: translate(50px,100px); /* IE 9 */-webkit-transform: translate(50px,100px); /* Safari and Chrome */-o-transform: translate(50px,100px); /* Opera */-moz-transform: translate(50px,100px); /* Firefox */}
2)rotate()
通过 rotate() 方法,元素顺时针旋转给定的角度。允许负值,元素将逆时针旋转。
div{transform: rotate(30deg);-ms-transform: rotate(30deg); /* IE 9 */-webkit-transform: rotate(30deg); /* Safari and Chrome */-o-transform: rotate(30deg); /* Opera */-moz-transform: rotate(30deg); /* Firefox */}
3)scale()
通过 skew() 方法,元素翻转给定的角度,根据给定的水平线(X 轴)和垂直线(Y 轴)参数:
div{transform: scale(2,4);-ms-transform: scale(2,4); /* IE 9 */-webkit-transform: scale(2,4); /* Safari 和 Chrome */-o-transform: scale(2,4); /* Opera */-moz-transform: scale(2,4); /* Firefox */}
4)skew()
通过 skew() 方法,元素翻转给定的角度,根据给定的水平线(X 轴)和垂直线(Y 轴)参数:
div{transform: skew(30deg,20deg);-ms-transform: skew(30deg,20deg); /* IE 9 */-webkit-transform: skew(30deg,20deg); /* Safari and Chrome */-o-transform: skew(30deg,20deg); /* Opera */-moz-transform: skew(30deg,20deg); /* Firefox */}
5)matrix()
matrix() 方法把所有 2D 转换方法组合在一起。matrix() 方法需要六个参数,包含数学函数,允许您:旋转、缩放、移动以及倾斜元素。
div{transform:matrix(0.866,0.5,-0.5,0.866,0,0);-ms-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* IE 9 */-moz-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Firefox */-webkit-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Safari and Chrome */-o-transform:matrix(0.866,0.5,-0.5,0.866,0,0); /* Opera */}
8.3D旋转
rotateX() 方法
通过 rotateX() 方法,元素围绕其 X 轴以给定的度数进行旋转。
rotateY() 旋转
通过 rotateY() 方法,元素围绕其 Y 轴以给定的度数进行旋转。
rotateZ() 旋转
通过 rotateZ() 方法,元素围绕其 Z 轴以给定的度数进行旋转。
rotate3d() 旋转
通过 rotate3d(x,y,z,a) 方法,x,y,z是一个0~1之间的数值,主要描述元素围绕x,y,z旋转的矢量值。a为角度值,主要来指定元素的3D空间旋转角度,正值为顺时针旋转,否则为逆时针。
转换方法:
- 【读书笔记】CSS3学习(三)
- 【读书笔记】CSS3学习(一)
- 【读书笔记】CSS3学习(二)
- CSS3学习笔记之(三)选择器
- CSS3-学习记录三(选择器)
- CSS3 简介 (三)
- Css3学习笔记(三):文字与字体
- [持续更新]CSS3学习笔记(三)弹性盒子
- CSS3(三)—— CSS3背景
- HTML5和CSS3权威指南-读书笔记(CSS3部分)
- 机器学习(周志华)读书笔记-(三)线性模型
- 机器学习读书笔记(三) 离散数据的生成模型
- 读书笔记| (三)ARM9 嵌入式学习:ARM实验篇
- ffmpeg学习三:《FFmpeg Basics》读书笔记(下)
- Python《机器学习实战》读书笔记(三)——决策树
- CSS3属性笔记(三)
- CSS3(三)布局样式
- CSS3的边框(三)
- java编译原理
- JSTL
- git连接报错-低级错误
- Python学习
- new一个Object对象占用多少内存?
- 【读书笔记】CSS3学习(三)
- CSS实现垂直居中的常用方法
- 多目标跟踪算法
- Java中属性和字段的区别
- 234. Palindrome Linked List
- MyEclipse内存参数配置“ -Xms128M -Xmx512M -XX:PermSize=64M -XX:MaxPermSize=128M ”的含义
- 需求分析具体写法
- 使用POI读取EXCEL中的所有Sheet表
- ios app 实现热更新(无需发新版本实现app添加新功能)