2024/10/10Wiki--浏览次数--访问次数--跳出率--平均停留

Html和CSS学习

自己正经开始学编程的第一门语言！

18. 2D动画与3D转换

18.1 CSS3 2D转换

**转换（transform）**是CSS3中具有颠覆性的特征之一，可以实现元素的位移、旋转、缩放等效果

转换（transform）你可以简单理解为变形

移动：translate
旋转：rotate
缩放：scale

18.1.1 2D 转换之移动 translate

18.1.1.1 translate介绍

2D移动是2D转换里面的一种功能，可以改变元素在页面中的位置，类似定位

translate最大的优点就是不会影响其他元素的位置，可以凭借这一优点去整过渡效果transition

对于行内元素无效

总结：移动盒子的位置三种方法：定位、盒子的外边距、2d转换移动

18.1.1.2 盒子实现水平居中

CODE

div {
  margin: 0 auto;
}

18.1.2 2D 转换之旋转 rotate

18.1.2.1 rotate介绍

2D旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转

18.1.2.2 旋转效果

CODE

div {
  transform: rotate(45deg);
}

18.1.2.3 三角做法

该下标当经过最外层大盒子时会实现向上反转

CODE

/* CSS 实现三角形 */
.triangle {
  width: 0;
  height: 0;
  border: 10px solid transparent;
  border-bottom-color: #333;
}

18.1.3 2D 转换中心点 transform-origin

18.1.3.1 transform-origin介绍

设置中心点

设置像素时这个中心点也是相对于这个大盒子来说的

18.1.3.2 盒子不同中心旋转

CODE

/* 转换中心点 */
div {
  transform-origin: center center;  /* 默认 */
  /* transform-origin: 50% 50%; */
  /* transform-origin: left top; */
}

18.1.3.3 旋转案例

CODE

div {
  transform: rotate(45deg);
}

18.1.4 2D 转换之缩放scale

18.1.4.1 scale介绍

缩放，顾名思义，可以放大和缩小。只要给元素添加上了这个属性就能控制它放大还是缩小

18.1.4.2 分页按钮

CODE

div {
  transform: scale(1.2);
}
```Css
/* 2D 缩放 */
div {
  transform: scale(1.2);
  /* transform: scale(1.2, 0.8);  宽1.2倍，高0.8倍 */
}

@keyframes slide { from { transform: translateX(0); } to { transform: translateX(100px); } } div { animation: slide 1s ease infinite; }

CODE

/* 定义动画 */
@keyframes move {
  0% { transform: translateX(0); }
  100% { transform: translateX(100px); }
}
/* 调用动画 */
div {
  animation: move 1s ease 0s infinite alternate;
}

@keyframes slide { from { transform: translateX(0); } to { transform: translateX(100px); } } div { animation: slide 1s ease infinite; }

CODE


<img style="max-width:100%" src="/images/feishu/assets/2024-10-10-Html和CSS学习-200.png">

#### 18.2.1.5 动画简写

<img style="max-width:100%" src="/images/feishu/assets/2024-10-10-Html和CSS学习-201.png">

name,duration这两个属性必须写！

### 18.2.2 案例

#### 18.2.2.1 热点图

<img style="max-width:100%" src="/images/feishu/assets/2024-10-10-Html和CSS学习-202.png">

```Css
@keyframes slide {
  from { transform: translateX(0); }
  to { transform: translateX(100px); }
}
div {
  animation: slide 1s ease infinite;
}

18.2.2.2 奔跑的熊大

这个需要用到动画效果，同时要使用steps，一步一步的展示，不可以用ease等值，这个图片一般很大，上边集成了运动的多个状态

CODE

/* 定义动画 */
@keyframes move {
  0% { transform: translateX(0); }
  100% { transform: translateX(100px); }
}
/* 调用动画 */
div {
  animation: move 1s ease 0s infinite alternate;
}

背景如果跟父盒子一样的话，往左走100%会使得背景露出来，此时不要忘记背景平铺：repeat-x,repeat-y

18.2.3 知识点回顾

CODE

div {
  background-repeat: no-repeat;
}

18.3 3D 转换

我们生活的环境是3D的，照片就是3D物体在2D平面呈现的例子

18.3.1 坐标轴认识

18.3.2 3D移动 translate3d

x,y,z如果没有移动量的话，不要不写，不可省略

translate3d的效果需要搭配透视perspective来使用

18.3.3 透视 perspective

透视写在父盒子上，单位为像素

18.3.4 3D旋转 rotate3d

18.3.4.1 分开解释

总结来说就是左手原则

18.3.4.2 rotate3d介绍

18.3.5 3D呈现 transfrom-style

CODE

div {
  perspective: 500px;
  transform: rotateX(45deg);
}

18.3.6 案例

18.3.6.1 两面反转的盒子

CODE

/* 3D 透视（加在父元素上） */
.father {
  perspective: 500px;
}

18.3.6.2 3D导航栏

CODE

<!-- HTML 代码示例 -->
<div class="example">
  示例内容
</div>

18.3.6.3 旋转木马

CODE

div {
  transform: rotate(45deg);
}