CSS变换是在HTML DOM元素的风格属性上定义的。例如，沿其z轴旋转45度的元素的标记看起来像这样： >将转换附加到HTML文档的#element {
transform: rotateZ(45deg);
}
body {
transform: rotateZ(45deg);
}
应用旋转（45DEG）转换为文档的身体元素。
对于三维变换，CSS转换规范定义了可以在我们转换的元素的母体上指定的透视属性。在转换内容的元素时，必须将其应用于位于DOM层次结构中上方的元素。这样做很简单：
html {
perspective: 500px;
}将旋转（45DEG）转换为的透视图：。
>我们可以在人体元素上操纵转化 - 原始特性以获得有趣的结果。让我们看一下几个示例：
上面的标记将沿x旋转作为人体元素设置，同时使用转化原孔将旋转的起源转移到元素的底部。有效地，这将文档的内容“进入”了这样的屏幕：
body {
transform-origin: 50% 100%;
transform: rotateX(45deg);
}>
>我们还可以在文档的根部元素上操纵透视 - 原始属性，以实现离轴投影效应。将的样式更改为：>
我们的页面现在看起来像这样：
html {
perspective: 500px;
perspective-origin: 90% 50%;
}请注意，内容如何实际上并不在窗口底部，而是在视口外的某个时候。这是CSS变换的预期行为：
正常布置，然后沿屏幕上某个地方的底部边缘旋转。您还会注意到，内容的实际脚印已经扩展（查看“后图”图片中的滚动条），以适应变换的内容（我们正在使用透视图投影的事实使此效果更加多发音）。>那么，在将转换应用于我们的身体元素时，我们如何处理任意尺寸的内容？自定义调整所有内容，以确保身体的大小不会扩大超过一定量可能是不现实的。取而代之的是，我们可以使用简单的HTML/CSS模式，该模式使我们能够将身体元素的大小固定到浏览器窗口的大小，并在包装器
#element {
transform: rotateZ(45deg);
}>下面的插图显示了页面垂直滚动时发生的情况，然后我们将旋转（45DEG）直接转换为文档的
元素（左）（左）和使用包装模式（右）：>
>通过利用上述模式并设置CSS随时使用百分比值转换，我们可以以一致的方式影响我们的
元素，而不论其内容的大小如何。>整理了将CSS转换到元素的复杂性后，CSS动画是下一步。通过遵循上述原则，我们可以创建动画，以有趣的方式将我们的Web内容视为视图（或从视图中删除）。
应用于元素时，此动画将导致其左侧旋转。当应用于使用我们的包装器模式的元素时，视觉结果会更有趣。该文档实际上将从浏览器窗口可见区域的外部旋转，然后旋转到完整视图：
body {
transform: rotateZ(45deg);
}>
#element {
transform: rotateZ(45deg);
}视觉结果为：
>由于我们可以利用CSS动画的全部功能来影响我们的整个Web内容，因此我们在生成这些页面效果方面具有很大的灵活性（而且我们当然不限于仅使用CSS变换）。但是，一旦我们构成了要应用于内容的效果，我们如何使它们在页面导航过程中触发？
将动画附加到。
>在身体元素中添加动画的第一个直观位置是Onload JavaScript事件。然而，事实证明，当on load火灾实际上为时已晚时添加动画。当我们页面中的整个内容完成加载时（包括任何图像或其他带宽密集型资源），此事件实际上会触发。将动画附加到带宽密集的页面上的onload将导致我们的内容显示“正常”，然后动画触发并将内容重新包含到视图中。不完全是我们目标的效果。> 或者，我们可以利用当浏览器完成内容的DOM结构时触发的Domcontentloaded事件（但有可能在资源完成加载之前）。 IE测试驱动器domcontentloaded演示说明了这两个事件之间的区别。但是，在具有复杂的Web内容的情况下，现代浏览器可能会选择执行“渐进式”渲染，并在加载整个DOM树之前显示页面。在这些情况下，视觉结果将类似于Onload方案。
>设置一个动画的最佳位置，该动画过渡我们的页面内容是元素的顶部。这样可以确保动画随着内容的渲染而开始正确（并且内容的启动位置将是我们所选动画的关键帧的开始位置）。这种方法的一个令人愉悦的副作用是，动画实际上可以掩盖可能与复杂内容一起发生的任何进行性渲染，重新分析或资源加载。>设置动画，使我们的内容过渡出来也很有趣。人们可以假设我们可以将onclick处理程序附加到我们内容中所有感兴趣的元素上（例如所有标签），并且只需在回调函数中设置相关的动画属性（Animation-name，Animation-Duration等） 。但是，如果我们实际上没有延迟导航的发生，我们将不会看到我们的预期流体过渡。 这是利用CSS动画规范中描述的动画事件的好机会。特别是，我们可以使用AnimationEnd事件来检测动画何时完成，然后触发导航（例如，通过设置window.location.href）。因此，我们的onclick将触发“删除从视图”动画，并在
>简单地享受页面到页面的动画，使用“继续……”链接在每个页面的右下角中浏览教程的页面。
>
>将其包裹起来CSS变换和CSS动画是两个强大的功能集，可实现更丰富，更身临其境的网络体验。通过少量努力，您可以创建网页（甚至是静态的页面），以提供流畅且几乎类似应用的导航体验。 如果您喜欢阅读这篇文章，那么您会喜欢学习；从大师那里学习新鲜技能和技术的地方。成员可以立即访问SitePoint的所有电子书和互动在线课程，例如实用的CSS。
全页CSS动画上经常询问问题一起使用，是的，CSS动画可以与SVG一起使用（可扩展向量图形）。 SVG拥有自己的CSS属性集，可以动画，例如填充，中风和转换。与对常规的HTML元素进行动画相比，这允许更复杂，有趣的动画。
>>
>如何优化我的CSS动画的性能？以优化CSS动画的性能，您可以限制动画属性，尤其是触发布局的动画属性会更改宽度，高度和边距。而是使用仅触发复合变化（例如变换和不透明度）的属性。您还可以使用Will-Change属性将可能是动画化的属性通知浏览器。
>我可以控制CSS动画的速度吗？财产。此属性定义了动画完成一个周期的时间长度。
>以上是如何使用CSS创建整页动画的详细内容。更多信息请关注PHP中文网其他相关文章！
