2d和3d

最新推荐文章于 2024-10-11 16:26:01 发布

weixin_48697269

最新推荐文章于 2024-10-11 16:26:01 发布

阅读量99

点赞数

分类专栏：移动web 文章标签： html css

本文链接：https://blog.csdn.net/weixin_48697269/article/details/124351076

版权

移动web 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

移动web transform

2d平移

translate 在2d的页面上做平移的水平和垂直 transform:translate(50px,50px)

translateX()

translateY()

translate(x,y)

特点：他在进行平移的时候是不会影响其他盒子的类似于相对定位

就是在平移百分比的时候是相对于自己的宽和高来说的

平移的时候坐标系是跟着一起来走的来做元素的平移的 – 只能水平或者垂直

绝对定位：脱离标准流 – 不占有位置

相对于谁来偏移呢？

首先父元素有无定位找到有定位的最近的父元素没有定位的父元素那么是按照body来偏移的

盒子水平垂直居中： top: 50%;

left: 50%;

transform: translate(-50%, -50%);

translate中的百分比单位是相对于自身元素的 translate:(50%,50%);
translate类似定位，不会影响到其他元素的位置
对行内标签没有效果

2d旋转 rotate

2d旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转角度为正时顺时针负时为逆时针

只能在2d这个平面上单位是 deg

transform : rotate(45deg)

transform : rotate(225deg)

旋转中心默认是以盒子的中心点(正中间的点)

transform-origin: 来设置旋转中心

transform-origin:50% 50%; 默认值元素的中心位置百分比是相对于自身的宽度和高度
transform-origin:top left; 左上角和 transform-origin：0 0;相同
transform-origin:50px 50px; 距离左上角 50px 50px 的位置
transform-origin：0; 只写一个值的时候第二个值默认为 50%;

2d缩放 scale

给元素添加转换属性 transform
转换的属性值为 scale(宽的倍数,高的倍数) 如宽变为两倍，高变为3倍 transform:scale(2,3)
缩放盒子的 1不缩放 1以上放大 1以下缩小
transform:scale(1,1) 放大一倍相对于没有放大
transform:scale(2,2) 宽和高都放大了2倍
transform:scale(2) 只写一个参数第二个参数则和第一个参数一样相当于 scale(2,2)
transform:scale(0.5,0.5) 缩小
transform:scale(-2,-2) 反向放大2倍很少用负数容易让人产生误解

动画

属性	描述
@keyframes	规定动画。
animation	所有动画属性的简写属性，除了animation-play-state属性。
animation-name	规定@keyframes动画的名称。（必须的）
animation-duration	规定动画完成一个周期所花费的秒或毫秒，默认是0。（必须的）
animation-timing-function	规定动画的速度曲线，默认是“ease”。 linear匀速
animation-delay	规定动画何时开始，默认是0。
animation-iteration-count	规定动画被播放的次数，默认是1，还有infinite
animation-direction	规定动画是否在下一周期逆向播放，默认是“normal“,alternate逆播放
animation-play-state	规定动画是否正在运行或暂停。默认是"running",还有"paused"。与hover搭配使用
animation-fill-mode	规定动画结束后状态，保持forwards 回到起始backwards

连写：：：animation: name duration timing-function delay iteration-count direction fill-mode;

速度曲线

1.和设置过渡的速度曲线一样 animation-timing-function:linear;

linear：匀速
ease：慢-快-慢默认值
ease-in：慢-快。
ease-out：快-慢。
ease-in-out：慢-快-慢。

2.循环方向

animation-direction

如在动画中定义了 0%：红色 100%：黑色 那么当属性值为

normal 默认值 红 -> 黑
reverse 反向运行 黑 -> 红
alternate 正-反-正… 红 -> 黑 -> 红…
alternate-reverse 反-正-反… 黑 -> 红 -> 黑 …

3.动画等待或者结束的状态

animation-fill-mode 设置动画在等待或者结束的时候的状态

forwards：动画结束后，元素样式停留在 100% 的样式
backwards：在延迟等待的时间内，元素样式停留在 0% 的样式
both：同时设置了 forwards和backwards两个属性值

CSS3的动画

与过渡不一样必须集合 hover才能用的！！！！！！

1.第一步首先定义一个动画

百分比是按照时间的百分比来对应的 100S

@keyframes 动画名(随便起) {

0%{} 开始

1%{}

2%{}

。。。

100%{} 终止

}

2、第二步才能用这个动画必须有两个属性

动画名动画要执行的时

from to 等价于 0% 和 100%

@keyframes move {

from {

transform: translate(0, 0);

}

to {

transform: translate(1000px, 0);

}

步长

连写：animation: pao 2s infinite steps(8)；

animation: move 10s infinite 1s;

animation: name duration timing-function delay iteration-count direction fill-mode;

动画里边新的值叫做 steps linear 匀速运动

3d

视距 perspertive 了解

人在看物体时，有个规律，如 远的物体看起来小 近的物体看起来大

perspertive 就是用来设置人和物体的距离

如我们想要看到物体在z轴上的移动的 远大近小 效果时

设置物体的 translateZ 一般大于 0 如 transform:translateZ(100px)
设置人和物体的距离 - 视距这个值规定要设置给物体的父元素 perspertive:1000px
动态改变物体的 translateZ 即可观察效果

 /* 父元素 */
 body {
  /* 视距 */
  perspective: 1000px;
}

/* 目标 */
div {
  width: 200px;
  height: 200px;
  background-color: aqua;
  margin: 100px auto;
  /* z轴的移动 */
  transform: translateZ(0px);
}

3d移动 translate3d

3d旋转 rotate3d

/* 沿着x轴正方向旋转90度 deg为单位 */
  transform: rotateX(90deg);

transform:rotateX(45deg); 沿着x轴正方向旋转 45度
transform:rotateY(45deg) 沿着y轴正方向旋转 45deg
transform:rotateZ(45deg) 沿着Z轴正方向旋转 45deg
transform:rotate3d(x,y,z,deg) 沿着自定义轴旋转 deg为角度了解即可

坐标轴是随着盒子的旋转而旋转的

Z轴是垂直于这个平面的

连写的时候顺序要根据实际情况来定不是写死的

转换样式 transform-style 了解

结合3d立方体案例理解，控制子元素是否开启3维立体环境

transform-style: flat; 平面模式 - 不开启3维立体环境
transform-style: preserve-3d; 3维立体环境