移动 Web核心笔记(二)

空间转换

空间:是从坐标轴角度定义的 X 、Y 和 Z 三条坐标轴构成了一个立体空间,Z 轴位置与视线方向相同。 空间转换也叫 3D转换
属性:transform

平移

css 复制代码
/*单独设置 z轴效果不明显*/
transform: translate3d(x, y, z);
transform: translateX();
transform: translateY();
transform: translateZ();

取值(正负均可)

  • 像素单位数值
  • 百分比(参照盒子自身尺寸计算结果)

提示
默认情况下,Z 轴平移没有效果

视距 perspective

作用:指定了观察者与 Z=0 平面的距离,为元素添加透视效果
透视效果:近大远小、近实远虚
属性:( 添加给父级,取值范围 800-1200)

旋转

配合 视距perspective(800~1200) 效果更佳哦

css 复制代码
/*绕着z轴而转 方向:顺时针*/
transform: rotateZ(值deg);
/*绕着x轴而转 方向:向里面*/
transform: rotateX(值deg);
/*绕着y轴而转 方向:向里面*/
transform: rotateY(值deg);

左手法则 -- 根据旋转方向确定取值正负
左手握住旋转轴, 拇指指向正值方向, 其他四个手指弯曲方向为旋转正值方向

立体呈现 -- transform-style

作用:设置元素的子元素是位于 3D 空间中还是平面中
属性名:transform-style
属性值:
flat:子级处于平面中
preserve-3d:子级处于 3D 空间

css 复制代码
 /*给父级元素*/
transform-style: preserve-3d;

呈现立体图形步骤

  1. 父元素添加transform-style: preserve-3d;
  2. 子级定位
  3. 调整子盒子的位置(位移或旋转)
    提示 : 空间内,转换元素都有自已独立的坐标轴,互不干扰
    旋转改变了原有的坐标轴向

缩放

css 复制代码
transform: scale3d(x, y, z);
transform: scaleX();
transform: scaleY();
transform: scaleZ();

动画 (animation)

过渡:实现两个状态间的变化过程
动画:实现多个状态间的变化过程,动画过程可控(重复播放、最终画面、是否暂停)

css 复制代码
/*定义动画:第一种*/
@keyframes 动画名称 {
    from{}
    to{}
}
/*定义动画:第二种*/
@keyframes 动画名称 {
/*百分比表示 动画时长的百分比*/
    0% {}
    10%{}
    ......
    100%{}
}

使用动画:

css 复制代码
animation:动画名称 动画时长(s) 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态;
速度曲线:linear 匀速运动
分布动画:steps() 配合精灵图使用

提示:
动画名称和动画时长必须赋值
取值不分先后顺序
如果有两个时间值,第一个时间表示动画时长,第二个时间表示延迟时间

css 复制代码
 /* 动画时长 */
animation-duration: 1s;
 /* 播放次数 */
animation-iteration-count: infinite;
.box:hover {
            /* 暂停动画 */
            animation-play-state: paused;
        }

多组动画

css 复制代码
animation:
    动画1,
    动画2,
    动画n
;
animation:
run 1s steps(12) infinite,
move 3s linear forwards
;
css 复制代码
img {
            /*图片为行内元素,不能设置宽高,要变为块元素,切记  */
            display: block;
            width: 200px;
        }
相关推荐
凉、介2 分钟前
PCI 总线学习笔记(五)
android·linux·笔记·学习·pcie·pci
天天扭码18 分钟前
深入解析 JavaScript 中的每一类函数:从语法到对比,全面掌握适用场景
前端·javascript·面试
Cao12345678932123 分钟前
简易学生成绩管理系统(C语言)
c语言·开发语言
The Future is mine24 分钟前
C# new Bitmap(32043, 32043, PixelFormat.Format32bppArgb)报错:参数无效,如何将图像分块化处理?
开发语言·c#
亿坊电商27 分钟前
PHP框架在微服务迁移中能发挥什么作用?
开发语言·微服务·php
烁34727 分钟前
每日一题(小白)模拟娱乐篇33
java·开发语言·算法
小希爸爸38 分钟前
4、中医基础入门和养生
前端·后端
kooboo china.41 分钟前
Tailwind CSS 实战:基于 Kooboo 构建企业官网页面(一)
前端·css·编辑器
坐吃山猪1 小时前
Python-Agent调用多个Server-FastAPI版本
开发语言·python·fastapi
uhakadotcom1 小时前
Fluid:云原生数据加速与管理的简单入门与实战
前端