CSS3（二）
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了CSS3（二），小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含4790字，纯文字阅读大概需要7分钟。
内容图文
6、2D转换
转换也是CSS3的特性之一，可以实现元素的位移translate、旋转rotate、缩放scale等效果
所谓2D转换是指二维平面内进行转换
6.1 移动
transform:translate(x, y);
/* 或者分开写 */
transform:translateX(n);
transform:translateY(n);
注意：
translate不会影响到其它元素的位置，不脱标，但是会覆盖其它元素，类似相对定位translate百分比单位是相对自身的translate(50%, 50%)- 切记：对行内标签没有效果
6.2 旋转 rotate
2D旋转指的是让元素在2维平面内顺时针或逆时针旋转
/* 旋转45度 */
transform: rotate(45deg)
- 默认的旋转中心是元素的中心
6.3 转换中心 transform-origin
transform-origin 用来设置转换的中心
transform-origin: x y;
- 参数x，y是用空格隔开的
- x， y ，默认是元素的中心点（50%, 50%）
- x，y 可以是像素点 或 方位词
6.4 缩放 scale
scale 可以放大或缩小元素
transform: scale(x, y);
- x，y 是用逗号隔开
scale(1, 1)：宽和高都放大一倍，可简写成scale(1)- 相应的
scale(0.5)就是缩小一倍 - 不影响其它盒子
6.5 2D综合写法
tranform:translate() rotate() scale();
- 先转换会改变坐标轴方向
- 当我们同时有唯一和其它属性的时候，记得要将位移放到最前面
7、3D转换
先说下规则：
只有y轴比较特殊，是垂直向下的
- x轴 ：水平向右 注意：x右边是正值，左边是负值
- y轴：垂直向下 注意：y下面是正值，上面是负值
- z轴：垂直屏幕 注意：往外是正值，往里面是负值
3D平时最常用的就是3D位移和3D旋转，而且3D一般都会结合透视
- 3D位移：
translate3d(x,y,z) - 3D旋转：
rotate3d(x,y,z) - 透视：
perspective - 3D呈现
transform-style
7.1 3D移动 translate3d
/* 仅仅是在X轴上移动 */
transform:translateX(100px)
/* 仅仅在Y轴上移动 */
transform:translateY(100px)
/* 仅仅在Z轴上移动 */
transform:translateZ(100px)
/* 其中x，y，z 分别指要移动的轴的方向的距离 */
transform:translate3d(x, y, z)
7.2 透视 prespective
prespective 就是在二维的平面产生远大近小的视觉立体
- 如果想在网页中产生3D效果需要透视（劣迹成3d投影到2d）
- 透视我们也称为视距：视距是人的眼睛到屏幕的距离，其单位是像素
- 距离视觉点越近的在电脑平面成像越大，越远成像越小
让物体变大有两种方法：
- 透视变小：就眼睛离物体距离变小
- z 轴变大：物体距离的成像平面距离变大（靠近眼睛）
透视写在被观察父盒子的上面
body {
/* 透视写到被观察父元素盒子的上面, 透视越小，盒子越大 */
perspective: 150px;
}
div {
width: 100px;
height: 100px;
background-color: pink;
transform: translate3d(500px, 100px, 100px)
}
7.3 3D旋转 rotate3d
3d旋转是可以让元素在三维平面内沿着x、y、z轴或者 自定义轴进行旋转
/* 沿着X轴正方向旋转45度 */
transform:translateX(45deg)
/* 沿着Y轴正方向旋转45度 */
transform:translateY(45deg)
/* 沿着Z轴正方向旋转45度 */
transform:translateZ(45deg)
/* 沿着自定义轴旋转，deg为角度度（了解即可） */
transform:translate3d(x, y, z)
左手定则：
- 左手的手拇指指向x/y轴的正方向
- 其余手指的弯曲方向就是该方向沿着x/y轴旋转的方向
栗子：鼠标经过盒子 盒子转动
.demo2 {
width: 100px;
height: 100px;
background-color: blue;
transition: all 2s;
}
.demo2:hover {
transform: rotateZ(360deg);
}
7.4 3D呈现 transform-style
- 控制子元素是否开始三维立体三维环境
transform-style: flat;子元素不开启3D立体空间（默认的）transform-style: preserve-3d;：子元素开启立体空间- 代码写给父级，但是影响的是子盒子
- 这个属性很重要
8、动画
动画是CSS3具有的特征之一，可以通过设置多个节点来精准控制一组动画，常用来实现复杂的动画效果
8.1 基本使用步骤
制作动画分两步：
- 先定义
- 再使用
1、用 @keyframes 定义动画
@keyframes move {
/* 开始的地方 */
0% {
transform: translate(0, 0);
}
25% {
transform: translate(1000px, 0);
}
50% {
transform: translate(1000px, 400px);
}
75% {
transform: translate(0, 400px);
}
100% {
transform: translate(0, 0);
}
}
- 0% 是动画的开始，100%是动画的完成
- 建议用百分比来规定变化发生的时间，如果只有开始和结束，也可以用关键词
from和to，等同于0%和100%
注意：每一段动画的时间是平分的，所以为了让动画顺畅，一般让每段移动的距离都相同
2、 调用动画
div {
width: 100px;
height: 100px;
background-color: pink;
/* 动画名称 */
animation-name: move;
/* 持续时间 */
animation-duration: 3s;
}
8.2 常用属性
| 属性 | 描述 |
|---|---|
@keyframes | 规定动画属性 |
animation | 所有动画属性的简写属性，除了 animationplay-state 属性 |
animation-name | 规定 @keyframes 动画的名称 |
animation-druation | 规定动画完成一个周期所花费的秒或毫秒，默认是0 （必须的） |
animation-timeing-function | 规定动画的速度曲线，默认是 ease |
animation-delay | 规定动画何时开始，默认是0 |
animation-iteration-count | 规定动画被播放的次数，默认是1，还有 infinite 循环播放 |
animation-direction | 规定动画是否在下一周期逆向播放，默认是 normal, 逆播放：alternate |
animation-play-state | 规定动画是否正在运行或暂停。默认是 running， 还有 paused |
animation-fill-mode | 规定动画结束后状态，保持: forwards 回到起始: backwards |
其中，animation-name 和 animation-druation 是必须的
animation-play-state一般与鼠标点击或者经过一起使用
8.3 速度曲细节
animation-timing-function：规定动画速度曲线
| 值 | 描述 |
|---|---|
linear | 动画从头到尾的速度是相同的，均匀 |
ease | 默认。动画以低速开始，中间加快，在结束前变慢 |
ease-in | 动画以低速开始 |
ease-out | 动画以低速结束 |
ease-in-out | 动画以低速开始和结束 |
steps() | 指定了时间函数中的间隔数量 |
8.4 属性简写
animation : 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或结束的状态
animation:myfirst 5s linear 2s infinite alternate;
内容总结
以上是互联网集市为您收集整理的CSS3（二）全部内容，希望文章能够帮你解决CSS3（二）所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。