移动 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;
        }
相关推荐
hepherd5 分钟前
Flask学习笔记 - 模板渲染
前端·flask
LaoZhangAI5 分钟前
【2025最新】Manus邀请码免费获取完全指南:5种稳定渠道+3个隐藏方法
前端
经常见6 分钟前
浅拷贝与深拷贝
前端
巷北夜未央7 分钟前
Python每日一题(14)
开发语言·python·算法
FanetheDivine10 分钟前
正确使用flex-1
css·html
前端飞天猪11 分钟前
学习笔记:三行命令,免费申请https加密证书📃
前端
关二哥拉二胡13 分钟前
前端的 AI 应用开发系列二:手把手揭秘 RAG
前端·面试
斯~内克15 分钟前
前端图片加载性能优化全攻略:并发限制、预加载、懒加载与错误恢复策略
前端·性能优化
s_little_monster15 分钟前
【Linux】进程信号的捕捉处理
linux·运维·服务器·经验分享·笔记·学习·学习方法
奇怪的知识又增长了23 分钟前
Command SwiftCompile failed with a nonzero exit code Command SwiftGeneratePch em
前端