「css基础」Transforms 属性在实际项目中如何应用？

时间 2019-11-06

标签 css 基础 transforms 属性实际项目如何应用栏目 CSS 繁體版

原文原文链接

关于Transform变形属性你们都不陌生吧，能够经过此属性实现元素的位移translate(x,y)，缩放scale(x,y)，2d旋转rotate(angle)，3d旋转rotate3d(angle),倾斜变换skew(x-angle,y-angle)等，你也许已经很熟悉了这些属性，或许你也会有这样的困惑，这些属性在实际项目中如何应用呢？css

今天的文章，笔者不会详细一一介绍相关属性，默许你们已经很熟悉了，今天只作例子，聊聊这些属性在实际项目中的应用。html

本篇文章笔者将带着你们完成如下几个例子：前端

内容垂直居中
对话框气泡
弹跳的小球
转动的线圈（SVG）
翻转的卡片

本篇文章预计15分钟微信

内容垂直居中

在前端开发过程当中，内容居中是常见的需求。其中，居中又能够分为水平居中和垂直居中。水平居中是比较容易的，直接设置元素的margin:0 auto 就能够实现。可是垂直居中相对来讲是比较复杂一些的。实现的方法也比较多，好比flex布局，display:table等方法，今天笔者将经过使用Transform属性进行实现。ide

基本的页面布局和样式

为了方便你们理解，咱们先布局两个基本的文本框内容，html代码以下：svg

<div class="parent"> <div class="child"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore </div> </div> <div class="parent"> <div class="child"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam </div> </div>复制代码

上述代码并不复杂，咱们定义了两段内容长度不一样的文本。接下来让咱们为文本内容定义宽度，高度和边框，让咱们更加直观展现文本内容在展现区域的位置，其css部分代码以下：wordpress

.parent {
  height: 300px;
  width: 600px;
  padding: 0 1em;
  margin: 1em;
  border: 1px solid red;
}

.child {
  font-size: 1.2rem;
}复制代码

加上CSS代码后，咱们完成了基本的页面布局和样式，页面的效果以下图：布局

使其垂直居中

接下来咱们来实现文本垂直居中，有的同窗可能想到了使用top属性，实现文本的垂直居中，代码多是这样的：flex

.child {
  font-size: 1.2rem;
  position: relative;
  top: 50%;
}复制代码

运行后，页面的实际效果和咱们预想不一致，以下图所示：动画

从上面的图中能够看出，文本框的实际效果，文本内容的内容并非在中间而是在下半部分，并非咱们预想的垂直居中，你也许在想，若是咱们把文本内容在往上提一半，正好能知足垂直居中的需求，Transform属性中正好有个平移的属性translate(x,y)，咱们可使用Transform让元素在y轴方向移动，样式代码修改以下：

.child {
  font-size: 1.2rem;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}复制代码

正如咱们所想，咱们实现了内容的垂直居中，完成的效果以下：

细心的同窗会注意到，元素的中心位置是在“半像素”这条线上，有可能显得模糊，咱们能够添加perspective（视域）属性，让其更清楚，以下代码所示：

.child {
  // ...
  transform: perspective(1px) translateY(-50%);
}复制代码

最终的代码

通过上面的步骤，咱们最终完成了内容的垂直居中，最终的效果以下：

如下是最终的css代码，是否是很简单：

.parent {
  height: 300px;
  width: 600px;
  padding: 0 1em;
  margin: 1em;
  border: 1px solid red;
}

.child {
  font-size: 1.2rem;
  position: relative;
  top: 50%;
  transform: perspective(1px) translateY(-50%);
}复制代码

对话框气泡

微信想必你们每天用，咱们是否注意到聊天界面里文本对话框气泡，右边或左边会凸出个小箭头指向聊天人的头像，这个例子就要实现相似微信对话框的气泡。

建立基本的页面布局

首先咱们先建立一个基本的布局，代码以下：

html部分

<div class="box"> <div class="box-content"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam </div> </div>复制代码

css部分

html {
  font-size: 16px;
}
.box {
  width: 10rem;
  background-color: #e0e0e0;
  padding: 1rem;
  margin: 1rem;
  border-radius: 1rem;
}复制代码

完成之后，咱们的页面效果以下：

添加气泡箭头

接下来咱们来实现右箭头的气泡效果，贴着文本框咱们在右边放置个空文本框，咱们使用css的为元素属性 ::before 来实现，样式代码以下：

.box::before {
  content: '';
  width: 1rem;
  height: 1rem;
  background-color: #e0e0e0;
  overflow: hidden;
}复制代码

注：上述宽和高的属性，若是值越大，气泡的箭头就越大。

这个宽高1rem的正方形无内容的文本还在文本框内，咱们还没法看到，咱们须要将这个文本框右对齐，使其的一半内容露在外边，修改后的css代码以下：

.box {
  // ...
  position: relative;
}

.box::before {
  // ...
  position: absolute;
  right: -0.5rem;
}复制代码

完后的效果，咱们的页面效果是这样的：

气泡箭头应该在内容中间区域的位置，接下来，移动这个小方块的位置，正好能够利用咱们刚才学到垂直居中知识，css样式代码以下：

.box::before {
  // ...
  top: 50%;
  transform: translateY(-50%);
}复制代码

完成后的，这个小方块真的居中了，页面实际效果以下图所示：

从上图咱们能够看出，为了实现向右小箭头三角的效果，咱们只须要将方块旋转45度便可，修改后的css代码以下：

.box::before {
  // ...
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}复制代码

最终完成的代码

好了，咱们的气泡效果完成了，效果以下：

最终完成的css代码以下：

html {
  font-size: 20px;
}

.box {
  width: 10rem;
  background-color: #e0e0e0;
  padding: 1rem;
  margin: 1rem;
  border-radius: 1rem;
  position: relative;
}

.box::before {
  content: '';
  width: 1rem;
  height: 1rem;
  background-color: #e0e0e0;
  overflow: hidden;
  position: absolute;
  right: -0.5rem;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
}

.box-content {
  position: relative;
  z-index: 2;
}复制代码

弹跳的小球

接下来咱们要完成一个常见的需求，好比咱们经过API请求后台数据，上传图片等不能立返回结果，咱们须要让用户在页面停留片刻，为了给用户良好的用户体验，咱们通常都会有个正在加载中的动画进行提示，这个例子笔者将带着你们完成下面一个弹跳的小球，效果以下，是否是很酷：

首先咱们先进行基本的静态布局

html部分：

<div class="loader"></div>复制代码

css部分：

.loader {
  border-radius: 50%;
  width: 50px;
  height: 50px;
  background: linear-gradient(to bottom, #cb60b3 0%,#c146a1 50%,#a80077 51%,#db36a4 100%);
}复制代码

这样咱们就完成了一个具备颜色渐变的静态的紫色小球，效果以下：

接下来声明动画名

如何让这个静态的小球动起来呢，咱们须要借助css的动画属性，咱们来定义一个名为jump的无限循环动画，先快后慢，而后反方向执行一遍动画，1.5s循环一次，代码以下：

.loader {
  // ...
  animation: jump 1.5s ease-out infinite alternate;
}复制代码

而后完成动画的实现

怎么定义名为jump的动画？咱们让小球在垂直方向移动，咱们可使用translateY进行移动小球：

@keyframes jump {
  from {
    transform: translateY(0px)
  }
  to {
    transform: translateY(-50px)
  }
}复制代码

为了让小球有弹跳的空间，咱们须要将小球距离顶部50px，css代码修改以下：

.loader {
  margin-top: 50px;
}复制代码

继续完善动画效果

为了让动画效果更加有趣，咱们可让小球边旋转边上升，动画部分修改以下：

@keyframes jump {
  from {
    transform: translateY(0px) rotate(0deg)
  }
  to {
    transform: translateY(-50px) rotate(360deg)
  }
}复制代码

咱们动画能够继续完善，让其更加天然，小球上升过程当中，相对地面的观察者，弹的越高，就会感受小球越小，接下来修改小球动画部分，使用scale属性来缩小球，代码以下：

@keyframes jump {
  from {
    transform: translateY(0px) rotate(0deg) scale(1,1);
    opacity: 1;
  }
  to {
    transform: translateY(-50px) rotate(360deg) scale(0.8,0.8);
    opacity: 0.8;
  }
}复制代码

最终完成的css代码

好了，这个效果咱们就这样完成了，其完成后的css代码以下，是否是很简单？

.loader {
  margin-top: 50px;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  animation: jump 1.5s ease-out infinite alternate;
background: linear-gradient(to bottom, #cb60b3 0%,#c146a1 50%,#a80077 51%,#db36a4 100%);
}
@keyframes jump {
  from {
    transform: translateY(0px) rotate(0deg) scale(1,1);
    opacity: 1;
  }
  to {
    transform: translateY(-50px) rotate(360deg) scale(0.8,0.8);
    opacity: 0.8;
  }
}复制代码

转动的线圈（SVG）

这个例子，咱们要实现一个更炫的加载提示器，此次咱们要作的是基于SVG的动画效果，要理解这部份内容，你须要会svg相关的基础知识，具体的效果以下，感受就像”头部“的那个东西在牵动线条转圈圈，是否是很酷：

首先进行基本的绘制

咱们先用svg绘制一个基本的圈，示例的代码以下：

<svg class="spinner" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg"> <!-- 1 --> <circle class="path spinner-border" cx="33" cy="33" r="31" stroke="url(#gradient)"></circle> <!-- 2 --> <linearGradient id="gradient"> <!-- 3 --> <stop offset="50%" stop-color="#000" stop-opacity="1"></stop> <stop offset="65%" stop-color="#000" stop-opacity=".5"></stop> <stop offset="100%" stop-color="#000" stop-opacity="0"></stop> </linearGradient> <circle class="path spinner-dot" cx="37" cy="3" r="2"></circle> <!-- 4 --> </svg>复制代码

上述代码咱们完成了如下内容：

咱们定义了一个66×66的视口。
咱们定义了一个半径为31px的圆圈。
对圆圈的填充咱们使用了线性填充，分红了三段，实现了比较酷的渐变填充的线条效果。
接下来咱们在圆圈上添加了一个小圆，让用户感受这个线圈是这个小圆点牵着转动。

接下来咱们来定义css部分，将画布定义成180*180，示例代码以下：

.spinner {
  margin: 10px;
  width: 180px;
  height: 180px;
}复制代码

而后咱们来定义线圈和实心的小圆的css属性：

.spinner-dot {
  stroke: #000;
  stroke-width: 1;
  fill: #000;
}

.spinner-border {
  fill: transparent;
  stroke-width: 2;
  width: 100%;
  height: 100%;
}

.path {
  stroke-dasharray: 170;
  stroke-dashoffset: 20;
}复制代码

上述代码有几个属性须要解释下：

fill: transparent 的效果就是让大圈圈的填充颜色为透明色，只是个圈圈的线条而已。
stroke-dasharray: 170 的意思就是绘制点线和虚线，其实咱们显示的不是一个完整的圆圈，给人一种转成圆圈的线条感受，其值表明线条的长度
stroke-dashoffset: 表示偏移绘制起点的距离，其值越大，咱们的线条越短。
经过stroke-dasharray，stroke-dashoffset这两个属性，让咱们绘制了一个不完整的圆圈。

关于stroke-dasharray，stroke-dashoffset的介绍建议你们看张鑫旭老师的这篇博文《纯CSS实现帅气的SVG路径描边动画效果》 www.zhangxinxu.com/wordpress/2…

经过上述代码，咱们静态的线圈绘制好了，效果以下所示：

定义动画，让线圈转动起来

让线圈动起来，其实就是让其一直选择360度而已，咱们让其2秒转一圈，示例代码以下：

.spinner {
  // ...
  animation: rotate 2s linear infinite;
}

@keyframes rotate {
  to {
    transform: rotate(360deg);
  }
}复制代码

让牵动线圈运动的小实心圆更有趣，感受就像一个牵动发动机的“头”，让其倾斜摆动，示例代码以下：

.spinner-dot {
  // ...
  animation: skew 2s linear infinite alternate;
}

@keyframes skew {
  from {
    transform: skewX(10deg)
  }
  to {
    transform: skewX(40deg)
  }
}复制代码

最终完成的代码

就这样咱们实行了一个个酷酷的的，转动线圈的效果，完整的css代码以下：

.spinner {
  margin: 10px;
  animation: rotate 2s linear infinite;
  width: 180px;
  height: 180px;
}

.spinner-dot {
  stroke: #000;
  stroke-width: 1;
  fill: #000;
  animation: skew 2s linear infinite alternate;
}

.spinner-border {
  fill: transparent;
  stroke-width: 2;
  width: 100%;
  height: 100%;
}

.path {
  stroke-dasharray: 170;
  stroke-dashoffset: 20;
}

@keyframes rotate {
  to {
    transform: rotate(360deg);
  }
}

@keyframes skew {
  from {
    transform: skewX(10deg)
  }
  to {
    transform: skewX(40deg)
  }
}复制代码

翻转的卡片

这个动画效果也是咱们常见的，相似一些网站的图片，咱们鼠标悬停在上面，图片进行了翻转，就好像一个卡片，翻转到其背面，显示了背面的内容，实现后的效果以下所示：

静态页面布局

首先咱们先完成图片卡片的基本布局，示例代码以下：

<section class="container"> <figure class="photo"> <img src="https://images.freeimages.com/images/large-previews/535/natural-wonders-1400924.jpg" class="front side"> <figcaption class="back side"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </figcaption> </figure> <figure class="photo"> <img src="https://images.freeimages.com/images/large-previews/6d5/lake-at-the-cottage-1372381.jpg" class="front side"> <figcaption class="back side"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </figcaption> </figure> <figure class="photo"> <img src="https://images.freeimages.com/images/large-previews/a0d/autumn-tree-1382832.jpg" class="front side"> <figcaption class="back side"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </figcaption> </figure> </section>复制代码

上述代码咱们有三张图片，而且咱们定义了图片背面的文字内容。

接下来咱们来定义容器的样式，让三张图片在页面居中：

.container {
  margin: 10px auto;
}复制代码

而后咱们定义每张图片在容器中左浮动，排成一行，并定义图片的宽与高：

.photo {
  width: 22vw;
  height: 20vw;
  min-width: 130px;
  min-height: 100px;
  float: left;
  margin: 0 20px;
}复制代码

接着咱们定义图片的填充方式为cover：

.photo img {
  object-fit: cover;
}复制代码

最后咱们定义图片文字介绍的样式：

.side {
  width: 100%;
  height: 100%;
}复制代码

完成后的效果以下：

接着咱们继续将文字介绍内容移到图片的顶部：

.photo {
  // ...
  position: relative;
}

.side {
  // ...
  position: absolute;
}复制代码

完成后的效果以下所示：

让文字到背面去

如今开始使用css的魔法属性，将图片放置到3D空间去，将其3d变换，给人一种透视的感受，咱们使用transform-style这个属性，示例代码以下：

.photo {
  // ...
  transform-style: preserve-3d;
}复制代码

而后修改side样式，定义文字内容为背面，且背面属性不可见，这里使用了css的backface-visibility属性：

.side {
  // ...
  backface-visibility: hidden;
}复制代码

而后定义back相关的样式，先让背面翻转过去，在y轴上旋转180度。

.back {
  transform: rotateY(180deg);
  text-align: center;
  background-color: #e0e0e0;
}复制代码

这样咱们的文字描述部分在背面被隐藏了。

定义悬停动画

接下来，咱们定义鼠标悬停翻转卡片的功能，示例代码以下：

.photo:hover {
  transform: rotateY(180deg);
}复制代码

为了让动画效果不这么生硬，咱们须要增长过渡的动画属性，代码完善以下：

.photo {
  // ...
  transition: transform 1s ease-in-out;
}复制代码

最终完成后的代码

好了，最后一个例子咱们也完成了，是否是颇有趣，最终完整的css代码以下：

.container {
  margin: 10px auto;
}

.photo {
  width: 22vw;
  height: 20vw;
  min-width: 130px;
  min-height: 100px;
  float: left;
  margin: 0 20px;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 1s ease-in-out;
}

.photo:hover {
  transform: rotateY(180deg);
}

.photo img {
  object-fit: cover;
}

.side {
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: hidden;
}

.back {
  transform: rotateY(180deg);
  text-align: center;
  background-color: #e0e0e0;
}复制代码

友情提醒

毫无疑问，CSS3为咱们提供了强大的动画功能，甚至不须要任何JS咱们就能够于建立有趣和美丽的动画效果。可是，重要的是要合理使用它们而不是滥用它们。请记住，您的网站是为用户而不是为本身服务的（在大多数状况下，不管如何）。所以，应该利用CSS动画为用户提供更好的用户体验，而不是耍酷。

小节

在本文中，咱们已经了解了如何将CSS的Transforms变换属性运用到真实的项目中。经过本文，咱们已经了解了如何在页面上垂直对齐元素，对话框气泡，弹跳和旋转的加载动画，以及如何实现翻转动画。固然，也许你学会了其中的技巧，可是创造炫酷的动画，惟一的瓶颈限制就是你的想象力。

更多精彩内容，请微信关注“前端达人”公众号！