矩形做成翻页的效果html5,HTML CSS笔记变形效果-过渡效果-动画效果

ゝ一纸荒年。 2022-10-05 10:54 243阅读 0赞

一．transform

CSS3 提供了元素变形效果，也叫做变换。它可以将元素实现旋转、缩放和平移的功能。属性有两个：transform 和 transform-origin。

![21969944573841bb80ac8f910ae00c6c.png][]

对于 transform 的属性值，具体如下表：

![1d48b8b46f03f167cb72696fcfc2d853.png][]

//向水平和垂直各移动 200 像素，也可以使用百分比

transform: translate(200px,200px);

//向水平平移 200 像素，不加后面的 0 也可以

transform: translate(200px,0); transform: translateX(200px);

//向垂直平移 200 像素

transform: translate(0,200px); transform: translateY(200px);

//水平、垂直方向放大 1.5 倍transform: scale(1.5); transform: scale(1.5,1.5);

//水平、垂直方向缩小 0.8 倍

transform: scale(0.8,0.8);

//水平方向放大 1.5 倍

transform: scaleX(1.5);

//垂直方向放大 1.5 倍

transform: scaleY(1.5);

//旋转元素，0 ~ 360 度之间，负值均可

transform: rotate(-45deg);

//倾斜元素，0 ~ 360 度之间，负值均可

transform: skew(45deg, 20deg);

//水平倾斜元素，0 ~ 360 度之间，负值均可

transform: skewX(45deg);

//垂直倾斜元素，0 ~ 360 度之间，负值均可

transform: skewY(45deg);

//通过六个数值指定矩形，其内部公式计算较为复杂，请百度吧transform: matrix(1,0,0,1,30,30);

//不同的值可以累计，通过空格分割transform: rotate(-45deg) scale(1.5);

二．transform-origin

transform-origin 属性可以设置变换的起点。默认情况下，使用元素的中心作为起点。具体设置方案参考如下表：

![749defa5d0f3d56474a09f1057c4ba0f.png][]

这个属性是用来改变变形的基准点的，默认是在元素的中心位置，如果你改变了基准点。 它就会按照这个基准点进行变形。

//默认值，以中心点变形

transform-origin: center center; transform-origin: 50% 50%;

//以左上角为基准点变形transform-origin: left top; transform-origin: 0px 0px;

三．浏览器版本

CSS3 中的变形效果最低版本和需要前缀版本如下：

![441b1112373fee55937a0fb708eb14ed.png][]

//兼容完整版

\-webkit-transform: rotate(45deg);

\-moz-transform: rotate(45deg);

\-o-transform: rotate(45deg);

\-ms-transform: rotate(45deg); transform: rotate(45deg);

\-webkit-transform-origin: left top;

\-moz-transform-origin: left top;

\-o-transform-origin: left top;

\-ms-transform-origin: left top; transform-origin: left top;

四.3D 变形简介

由于 3D 是立体三维，在 x、y 轴的基础上一般会多出一个 z 轴，深入跃出轴。以下是

3D 变形的属性值表，如下：

![f66bee67bf283cdf985f421cf21c092d.png][]

3D 变形比 2D 变形出来的要晚一些，所以如果需要兼容旧版本浏览器，可以对照这个表。具体如下：

![665213189c3eeac7c2218307995e9f61.png][]

//兼容版本完×××式

\-webkit-transform: translateZ(200px);

\-moz-transform: translateZ(200px);

\-o-transform: translateZ(200px);

\-ms-transform: translateZ(200px); transform: translateZ(200px);

transform-style

transform-style 属性是指定嵌套元素如何在 3D 空间中呈现。

![c1f379b29f6815530bbbeea0764c68b5.png][]

//一般设置到当前元素的父元素transform-style: preserve-3d;

需要再配合后面的功能属性和变形配置，才能看到效果。同样，这个属性也需要加上各 种厂商前缀。

perspective

perspective 是 3D 变形的重要属性，该属性会设置查看者的位置，并将可视内容映射到一个视锥上，继而投放到一个 2D 平面上。

![1857f68054da2ef9dd1a2a7746ee3f5f.png][]

//设置查看者的距离位置，一般设置在元素的父元素上perspective: 1000px;

需要再配合后面的功能属性和变形配置，才能看到效果。同样，这个属性也需要加上各 种厂商前缀。

3D 变形属性

我们运用前面 3D 功能属性 transform-style 和 perspective 来构建 3D 变形效果。

1.translate3d(x,y,z)

//需要 3D 位移的 HTML 结构，必须有父元素包含

![Image 1][]

//CSS 部分，父元素设置 3D 呈现且设置透视距离

\#a \{

perspective: 1000px; transform-style: preserve-3d;

img \{

//z 轴可以是负值

transform: translate3d(300px,100px,240px);

2.translateZ(z)

//可以单独设置 z 轴，z 轴可以是负值

img \{

transform: translateZ(240px);

3.scale3d(x,y,z)

//3D 缩放，单独设置无效，需要配合角度

img \{

transform: scale3d(1,1,1.5) rotateX(45deg);

4.scaleZ(z)

//单独设置 z 轴，x 和 y 轴默认为 1 img \{

transform: scaleZ(1.5) rotateX(45deg);

5.rotate3d(x,y,z,a)

//设置 3D 旋转，a 表示角度，xyz 是 0 或 1 之间的数值

transform: rotate3d(1,0,0,45deg);

6.rotateX(a)、rotateY(a)、rotateZ(a)

// 单 独 设 置 3D 旋 转 transform: rotateX(45deg); transform: rotateY(45deg); transform: rotateZ(45deg);

transform: rotateX(45deg) rotateY(45deg) rotateZ(45deg);

最后一个 matrix3d 就不多说了，忽略。

CSS3 还提供了 perspective-origin 属性来设置 3D 变形中的源点角度。该属性默认值为 50% 50%也就是 center center。

![a4db23f99f1bf9b44850d9b54957b3a8.png][]

//源点设置为右上方变形perspective-origin: top right;

CSS3 还提供了一个在元素中设置透视的值 perspective(长度值)，但它还是和在父元素设置有一定不同。因为父元素整个作为透视，而元素自己作为透视，导致不同。

//具体测试看透视的距离img \{

transform: perspective(1000px) rotateY(45deg);

过渡简介

过渡效果一般是通过一些简单的 CSS 动作触发平滑过渡功能，比如：:hover、:focus、

:active、:checked 等。CSS3 提供了 transition 属性来实现这个过渡功能，主要属性如下表：

![8d60720a3f2dee78aaa6baa3753ea28c.png][]

我们先创建一个没有过渡效果的元素，然后通过:hover 来触发它。在没有任何过渡效果的触发，会立即生硬的执行触发。

//设置元素样式div \{

width: 200px; height: 200px;

background-color: white; border:1px solid green;

//鼠标悬停后背景变黑，文字变白div:hover \{

background-color: black; color: white;

margin-left: 50px;

transition-property

首先，设置过渡的第一个属性就是指定过渡的属性。同样，你需要指定你要过渡某个元 素的两套样式用于用户和页面的交互。那么就使用 transition-property 属性，详细属性值如下表：

![73a98fc81ed910f1aee1b52bb70c1667.png][]

从上门的列表中来看，一般来说，none 用于本身有过渡样式从而取消。而 all，则是支持所有 transition-property 样式，还有一种是指定 transition-property 中的某些样式。那么 transition-proerty 支持的样式有哪些？如下表所示：

![e9047cc41bfc3d9e42e410199aa78612.png][]

![64dfbe3ab5ebe40612aa8f2dfb0de5b2.png][]

//设置背景和文字颜色采用过渡效果

transition-property: background-color, color, margin-left;

transition-duration

如果单纯设置过渡的样式，还不能够立刻实现效果。必须加上过渡所需的时间，因为默 认情况下过渡时间为 0。

//设置过渡时间为 1 秒钟，如果是半秒钟可以设置为.5s transition-duration: 1s;

transition-timing-function

当过渡效果运行时，比如产生缓动效果。默认情况下的缓动是：元素样式从初始状态过 渡到终止状态时速度由快到慢，逐渐变慢，即 ease。也是默认值，其他几种缓动方式如下表所示：

![3b360b462da76d560e826d779393434c.png][]

//恒定速度

transition-timing-function: linear;

以上五种都是设定好的属性值，我们也可以自定义这个缓动。使用 cubic-bezier()

属性值，里面传递四个参数 p0,p1,p2,p3，值在 0~1 之间。

//自定义缓动

transition-timing-function: cubic-bezier(0.25, 0.67, 0.11, 0.55);

至于具体这些数值干什么的，怎么才可以精确得到相关的信息，这个要了解计算机图形 学中的三次贝塞尔曲线的相关知识，类似与 photoshop 中的曲线调色。这里我们忽略。

还有一种不是平滑过渡，是跳跃式过渡，属性值为：steps(n,type)。第一个值是一 个数值，表示跳跃几次。第二个值是 start 或者 end，可选值。表示开始时跳跃，还是结束时跳跃。

//跳跃 10 次至结束

transition-timing-function: steps(10,end);

transition-delay

这个属性可以设置一个过渡延迟效果，就是效果在设置的延迟时间后再执行。使用

transition-delay 属性值。如果有多个样式效果，可以设置多个延迟时间，以空格隔开。

//设置延迟效果

transition-delay: 0s, 1s, 0s;

简写和版本

我可以直接使用 transition 来简写，有两种形式的简写。第一种是，每个样式单独声明；第二种是不去考虑样式，即使用 all 全部声明。

//单独声明

transition: background-color 1s ease 0s, color 1s ease 0s, margin-left 1s ease 0s;

//如果每个样式都是统一的，直接使用 all transition: all 1s ease 0s;

为了兼容旧版本，需要加上相应的浏览器前缀，版本信息如下表：

![fb4b7a2f881c045183b288089a463906.png][]

//兼容完整版

\-webkit-transition: all 1s ease 0s;

\-moz-transition: all 1s ease 0s;

\-o-transition: all 1s ease 0s;

\-ms-transition: all 1s ease 0s; transition: all 1s ease 0s;

动画简介

CSS3 提供了类似 Flash 关键帧控制的动画效果，通过 animation 属性实现。那么之前的 transition 属性只能通过指定属性的初始状态和结束状态来实现动画效果，有一定的局限性。

animation 实现动画效果主要由两个部分组成：

1.通过类似 Flash 动画中的关键帧声明一个动画；

2.在 animation 属性中调用关键帧声明的动画。

CSS3 提供的 animation 是一个复合属性，它包含了很多子属性。如下表所示：

![5570d57fa5a5b59cb9cb10c0e2fe1cf9.png][]

除了这 9 个属性之外，动画效果还有一个重要的属性，就是关键帧属性：@keyframes。它的作用是声明一个动画，然后在 animation 调用关键帧声明的动画。

//基本格式，“name”可自定义@keyframes name \{

/.../

属性详解

在讲解动画属性之前，先创建一个基本的样式。

//一个 div 元素

我是 HTML5

//设置 CSS div \{

width: 200px; height: 200px;

background-color: white; border: 1px solid green;

1.@keyframes

//创建动画的第一步，先声明一个动画关键帧。@keyframes myani \{

0% \{

background-color: white; margin-left:0px;

50% \{

background-color: black; margin-left:100px;

100% \{

background-color: white; margin-left:0px;

//或者重复的，可以并列写在一起@keyframes myani \{

0%, 100% \{

background-color: white; margin-left:0px;

50% \{

background-color: black; margin-left:100px;

2.animation-name

//调用@keyframes 动画

animation-name: myani;

![1a58582a9d90738a04ce5a37830b59bd.png][]

3.animation-duration

//设置动画播放的时间animation-duration: 1s;

当然，以上通过关键帧的方式，这里插入了三个关键帧。0%设置了白色和左偏移为 0， 和初始状态一致，表明从这个地方开始动画。50%设置了黑色，左偏移 100px。而 100%则是最后一个设置，又回到了白色和左偏移为 0。整个动画就一目了然了。

而对于关键帧的用法，大部分用百分比比较容易控制，当然，还有其他一些控制方法。

//从什么状态过渡到什么状态@keyframes myani \{

from \{

background-color: white; margin-left:0px;

to \{

background-color: black; margin-left:100px;

4.animation-timing-function

//设置缓动

animation-timing-function: ease-in;

![605c0be11a903bb8e443a38811b5b6d6.png][]

3.animation-delay

//设置延迟时间animation-delay: 1s;

4.animation-iteration-count

//设置循环次数

animation-iteration-count: infinite;

![8a6f93b68f0becbbe953f2324173ac4f.png][]

5.animation-direction

//设置缓动方向交替

animation-direction: alternate;

![5c442a2ff3ece1f27ae3bf5cda534fd1.png][]

6.animation-play-state

//设置停止播放动画

animation-play-state: paused;

7.animation-fill-mode

//设置结束后不在返回

animation-fill-mode: forwards;

![7a467a96dbf55490a2eaa350c1f2f8eb.png][]

//both 需要结合，次数和播放方向animation-iteration-count: 4; animation-direction: alternate;

简写和版本

//简写形式完整版

animation: myani 1s ease 2 alternate 0s both;

为了兼容旧版本，需要加上相应的浏览器前缀，版本信息如下表：

![bc5e59755024e1bfb584b57c6126acac.png][]

//兼容完整版，Opera 在这个属性上加入 webkit，所以没有-o-

\-webkit-animation: myani 1s ease 2 alternate 0s both;

\-moz-animation: myani 1s ease 2 alternate 0s both;

\-ms-animation: myani 1s ease 2 alternate 0s both; transition: all 1s ease 0s;

//@keyframes 也需要加上前缀

@-webkit-keyframes myani \{...\} @-moz-keyframes myani \{...\}

@-o-keyframes myani \{...\} @-ms-keyframes myani \{...\} keyframes myani \{...\}

[21969944573841bb80ac8f910ae00c6c.png]: /images/20221005/9e49f8a6930c4edabe9c5b08669db95d.png
[1d48b8b46f03f167cb72696fcfc2d853.png]: /images/20221005/1da30cccf58f47bdbf5c76e33ab787cf.png
[749defa5d0f3d56474a09f1057c4ba0f.png]: /images/20221005/99d2d6d4d94f4823a517f1320fb20cb1.png
[441b1112373fee55937a0fb708eb14ed.png]: /images/20221005/d30fb83c183a40f3bd2c45c8d1c5eeea.png
[f66bee67bf283cdf985f421cf21c092d.png]: /images/20221005/02e82a79a2854713b96b48e634164926.png
[665213189c3eeac7c2218307995e9f61.png]: /images/20221005/bee1a56f7a5c4c4dbaa4193875abcf34.png
[c1f379b29f6815530bbbeea0764c68b5.png]: /images/20221005/0319275b6f294e97a15c0982b570efc4.png
[1857f68054da2ef9dd1a2a7746ee3f5f.png]: /images/20221005/f4398a9ee3564242bf98526e69a47155.png
[Image 1]: 
[a4db23f99f1bf9b44850d9b54957b3a8.png]: /images/20221005/bddff38c96674bc296d342cd30358081.png
[8d60720a3f2dee78aaa6baa3753ea28c.png]: /images/20221005/9a8a6083b7d4442e957dc1163a13734b.png
[73a98fc81ed910f1aee1b52bb70c1667.png]: /images/20221005/607c32ac990f41e58b963be48073f068.png
[e9047cc41bfc3d9e42e410199aa78612.png]: /images/20221005/13ebdc55edb847aa8df213e8f546da6d.png
[64dfbe3ab5ebe40612aa8f2dfb0de5b2.png]: /images/20221005/e30fe38ec41a4e97854cbdb0f018cc79.png
[3b360b462da76d560e826d779393434c.png]: /images/20221005/c84655bc267344a8922c58fc2713cc08.png
[fb4b7a2f881c045183b288089a463906.png]: /images/20221005/29746224fade40499fbd2cb9e03b8d28.png
[5570d57fa5a5b59cb9cb10c0e2fe1cf9.png]: /images/20221005/df71d2d62e6845a9bc160b34acb969b8.png
[1a58582a9d90738a04ce5a37830b59bd.png]: /images/20221005/956eb8c3a66b4eb599d53951196a9ada.png
[605c0be11a903bb8e443a38811b5b6d6.png]: /images/20221005/1a666d3c70e84d50ba9c40288909657b.png
[8a6f93b68f0becbbe953f2324173ac4f.png]: /images/20221005/8e026c2b7e2f4c439685d168310686fe.png
[5c442a2ff3ece1f27ae3bf5cda534fd1.png]: /images/20221005/8162426e3e1e466581adb6e03f7beaab.png
[7a467a96dbf55490a2eaa350c1f2f8eb.png]: /images/20221005/94cbd1af4a264ca79533a34e16c2d896.png
[bc5e59755024e1bfb584b57c6126acac.png]: /images/20221005/60ddf3e2448741f6a60221b4327c0275.png