移动 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;
        }
相关推荐
软件技术NINI36 分钟前
html css网页制作成品——HTML+CSS盐津铺子网页设计(5页)附源码
前端·css·html
R-G-B1 小时前
【02】C#入门到精通——C# 变量、输入/输出、类型转换
开发语言·c#·c# 变量·c#输入/输出·c#类型转换
星河队长1 小时前
C# 软件加密方法,有使用时间限制,同时要防止拷贝
开发语言·c#
史迪奇_xxx1 小时前
10、一个简易 vector:C++ 模板与 STL
java·开发语言·c++
2301_801252221 小时前
Java中的反射
java·开发语言
Kiri霧1 小时前
Rust开发环境搭建
开发语言·后端·rust
weixin-a153003083162 小时前
[数据抓取-1]beautifulsoup
开发语言·python·beautifulsoup
Pu_Nine_92 小时前
教程: 在网页中利用原生CSS实现3D旋转动画
css·3d·css3
mapbar_front2 小时前
面试问题—我的问题问完了,你还有什么想问我的吗?
前端·面试
遇印记2 小时前
大二java学习笔记:二维数组
java·笔记·学习