基础 3D 简单示例一个轮播图

zheshihuahua

已于 2022-07-27 22:15:15 修改

阅读量625

点赞数 2

文章标签： wpf

于 2022-05-12 21:55:40 首次发布

本文链接：https://blog.csdn.net/zheshihuahua/article/details/124740761

版权

今天讲讲最基础的3D和动画，3D 坐标系比2D 多了一个Z轴，比较难的是3D的坐标轴取值：

>一定要记住3个坐标轴取值的正反：

>- X 轴往右越大，是正值，否则反之

>- Y 轴往下越大，是正值，否则反之

>- Z轴（指向我们）越大，是正值，否则反之

3D位移的CSS写法：

transform: translate3d(x, y, z);

一般分开来写：

transform: translateX(100px);

transform: translateY(100px);

transform: translateZ(100px);

透视

透视的作用：空间转换时，为元素添加近大远小、近实远虚的视觉效果

语法: perspective: 800px;

**透视注意事项：**

1. 取值范围经常在 800px ~ 1200px 之间。

2. 一定给**父亲**添加

3. 透视距离也称为视距，所谓的视距就是人的眼睛到屏幕的距离。

- 其中 d 为透视的距离

- z 是 `translateZ` 的距离，这个距离靠近我们，盒子越大

## 3D旋转

有了透视的加持，我们3d旋转效果会比较明显。

rotateX

类似单杠旋转。

> 注意：默认的旋转中心在盒子的中心位置。

遵循左手法则

一定要搞清楚X轴和Y轴如何旋转的，旋转的度数是正值还是负值。

规则：

1. 大拇指指向X轴正向方（右），则四指指向的方向是旋转的方向

2. 大拇指指向Y轴正向方（下），则四指指向的方向是旋转的方向

# 立体呈现

让子盒子在父盒子内有空间的展示，此时可以给**父亲**添加

transform-style: preserve-3d;

动画：动画最大的特点可以不用鼠标触发，自动的，反复的执行某些动画。

/* 1. 定义的动画 */

@keyframes dance {

from {

transform: scale(1)

}

to {

transform: scale(1.5)

}

~~~

或者是

~~~css

/* 1. 定义的动画 */

@keyframes dance {

0% {

transform: scale(1)

}

100% {

transform: scale(1.5)

}

~~~

2. 调用

~~~css

img {

width: 200px;

/* 2. 使用动画 animation: 动画名称执行时间; infinite 循环*/

animation: dance .5s infinite;

}

1. 动画名字参照css类选择器命名

2. 动画时长和延迟时间别忘了带单位 s

3. **infinate** 无限循环动画（重复次数）

4. **alternate** 为反向就是左右来回执行动画（跑马灯）

5. **forwards** 动画结束停留在最后一帧状态，不循环状态使用

6. **linear** 让动画匀速执行

鼠标经过box，则 ul 停止动画

.box:hover ul {

animation-play-state: paused;

}

我们想要2个动画一起执行 animation: 动画1, 动画2, ... 动画n

animation: run 1s steps(12) infinite, move 5s linear forwards;

轮播图案列：

<style>

* {

margin: 0;

padding: 0;

}

.box {

position: absolute;

left: 0;

top: 0;

right: 0;

bottom: 0;

margin: auto;

width: 600px;

height: 150px;

border: 3px solid #000;

overflow: hidden;

}

/* 要7张图一格子三张要把前三张在加一次放到最后面,但是动画效果里面的宽度不要改,只改装图片的大盒子(ul)的宽度,之后最外面的大盒子(box)溢出隐藏 */

.box ul {

list-style-type: none;

width: 2000px;

height: 150px;

animation: po 6s linear infinite;

}

.box ul li {

float: left;

width: 200px;

height: 150px;

}

.box ul li img {

width: 200px;

height: 150px;

}

@keyframes po {

to {

transform: translate(-1400px);

}

/* 鼠标移入暂停动画 */

.box:hover ul {

animation-play-state: paused;

}

</style>

</head>

<body>

<ul>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

<li>

</li>

</ul>

</div>

</body>

基 础 3D 简 单 示 例 一 个 轮 播 图

基础 3D 简单示例一个轮播图