什么是 tailwindcss

首先它是一个通用的类 css 框架，它内置了很多方便使用的 class，比如 text-center,pt-4,rotate-90，通过使用这些内置的样式，你可以非常快速地构建出一个网站的雏形。

html：

<h1>垂直翻转</h1>
<div class="card vertical">
  <div class="card-side front">
    <div>正面</div>
  </div>
  <div class="card-side back">
    <div>背面</div>
  </div>
</div>

<h1>水平翻转</h1>
<div class="card horizontal">
  <div class="card-side front">
    <div>正面</div>
  </div>
  <div class="card-side back">
    <div>背面</div>
  </div>
</div>

css动画就是元素从一种样式过渡到另一种样式的过程。常见的动画效果很多，比如，平移、旋转、缩放等，css实现动画的方式有以下几种：

旋转地球功能实现主要借助于CSS动画效果完成，通过移动地图背景图层，云彩图层等，在视觉上呈现出旋转地球效果。旋转地球最终实现效果如下图所示：

设计思路与核心技术

旋转地球效果实现主要借助于animation动画属性完成，在动画关键之keyframe编写时移动图片坐标位置，实现背景地图图片位置移动。为体现移动效果，进一步定义了云彩与飞机，飞机居中固定，云彩与地球非同步移动，最终呈现出动态效果。本例所需核心技术主要描述如下：