移动 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;
        }
相关推荐
花生侠10 分钟前
记录:前端项目使用pnpm+husky(v9)+commitlint,提交代码格式化校验
前端
ruan11451410 分钟前
Java Lambda 类型推断详解:filter() 方法与 Predicate<? super T>
java·开发语言·spring·stream
广东数字化转型13 分钟前
java jar 启动应用程序
开发语言·python
阿幸软件杂货间15 分钟前
阿幸课堂随机点名
android·开发语言·javascript
一涯17 分钟前
Cursor操作面板改为垂直
前端
我要让全世界知道我很低调24 分钟前
记一次 Vite 下的白屏优化
前端·css
threelab24 分钟前
three案例 Three.js波纹效果演示
开发语言·javascript·ecmascript
1undefined226 分钟前
element中的Table改造成虚拟列表,并封装成hooks
前端·javascript·vue.js
岑梓铭30 分钟前
计算机网络第九章——数据链路层《局域网》
网络·笔记·计算机网络·考研·408
黎明smaly37 分钟前
【排序】插入排序
c语言·开发语言·数据结构·c++·算法·排序算法