「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;
}複製代碼