css3D旋轉相冊

天學習了平面動畫，今天來3D動畫：

css3的強大之處就在于它可以用很少量的標簽，來實現一些要用到插件或者js，jq很多代碼才能實現的復雜功能。隨著css3版本的推進，各瀏覽器的兼容性也會越來越好，開發會很容易。

實現上圖的關鍵點在于，如何布局不了解css3的可能會說要定位，其實不然，我們只需要transform的rotate和translate即可輕松實現旋轉位移.至于圖片了可以用img也可以直接背景圖。下面是我的頁面結構和css樣式

<style>

*{margin:0; padding:0; list-style: none;}

div{

width: 105px;

height: 150px;

margin:100px auto;

-webkit-perspective: 1000;

-webkit-perspective-origin: center center;

}

ul{

width: 105px;

height: 150px;

position: relative;

-webkit-transform-style: preserve-3d;

-webkit-transform:rotateX(-16deg) rotateY(0deg) rotateZ(0deg);

-webkit-animation: ;

}

@-webkit-keyframes run{

from{ }

to{ }

}

ul li{width: 105px; height: 150px; position: absolute; -webkit-background-size:100% 100%;}

ul li:nth-child(1){

-webkit-transform: translateZ(200px);

}

ul li:nth-child(2){

-webkit-transform:rotateY(30deg) translateZ(200px);

}

ul li:nth-child(3){

-webkit-transform:rotateY(60deg) translateZ(200px);

}

ul li:nth-child(4){

-webkit-transform:rotateY(90deg) translateZ(200px);

}

ul li:nth-child(5){

-webkit-transform:rotateY(120deg) translateZ(200px);

}

ul li:nth-child(6){

-webkit-transform:rotateY(150deg) translateZ(200px);

}

ul li:nth-child(7){

-webkit-transform:rotateY(180deg) translateZ(200px);

}

ul li:nth-child(8){

-webkit-transform:rotateY(210deg) translateZ(200px);

}

ul li:nth-child(9){

-webkit-transform:rotateY(240deg) translateZ(200px);

}

ul li:nth-child(10){

-webkit-transform:rotateY(270deg) translateZ(200px);

}

ul li:nth-child(11){

-webkit-transform:rotateY(300deg) translateZ(200px);

}

ul li:nth-child(12){

-webkit-transform:rotateY(330deg) translateZ(200px);

}

</style>

結構是div抱著ul和li有多少圖片就有多少個li（這里就不展示了）

只有這個相冊就可以旋轉了么，當然不會，各位還需要在上文@-webkit-keyframes處補全animation動畫即可，animation動畫在上篇《純css實現無縫滾動》中又詳細代碼拿過來即可

這里是云端源想IT，幫你輕松學IT”

嗨~ 今天的你過得還好嗎？

憂慮像一把搖椅

它可以使你有事做

但不能使你前進一步

- 2024.04.10 -

在深入探討CSS變形動畫之前，讓我們先探討一下掌握它之后你可以實現哪些有趣的效果。

學習了CSS變形動畫之后，你將能夠為你的網頁添加引人注目的動態效果，例如創建一個立體的3D魔方，或者設計一個引人入勝的旋轉菜單。這些僅僅是眾多可能性中的一小部分，但或許可以勾起我們的學習興趣。

一、什么是CSS變形動畫？

CSS變形動畫是利用CSS3的transform屬性創建的動畫效果。它可以使元素旋轉、縮放、傾斜甚至翻轉，讓靜態的網頁元素動起來，為用戶帶來更加豐富的交互體驗。

坐標系統

首先我們要學習的變形動畫，想達到在上圖中出現的3D效果單純的X與Y兩個軸是實現不了的，還需要加入一條縱深軸，即Y軸的參與才有一個3D的視覺感受。

那么如何來理解X,Y,Z這三條軸的關系呢？可以看一下下面這張圖。

X軸代表水平軸
Y軸代表垂直軸
Z軸代表縱深軸

X和Y軸都非常好理解，怎么理解這個Z軸呢？

CSS的中文名稱叫做層疊樣式表，那么它肯定是一層一層的。之前學習過z-index就是用來設置層的優先級，優先級越高越在上面，也可以理解為離我們肉眼越近，它把優先級低的層給蓋住了，所以Z軸可以理解為我們觀察的視角與被觀察物體之間的一條軸。

Z軸數值越大，說明觀測距離越遠。
Z軸的數值可以無限大，所以設置的時候一定要小心。

二、變形操作

使用 transform 來控制元素變形操作，包括控制移動、旋轉、傾斜、3D轉換等。

下面我們通過一些例子來演示一下，比較常用的變形操作：

2.1 位移 translate()

translate()函數可以將元素向指定的方向移動，類似于position中的relative。或以簡單的理解為，使用translate()函數，可以把元素從原來的位置移動，而不影響在X、Y軸上的任何Web組件。

想象一下，當你滾動頁面時，一個元素平滑地從一個位置滑向另一個位置，這種流暢的過渡效果可以大大提升用戶體驗。

translate我們分為三種情況：

1）translate(x,y)水平方向和垂直方向同時移動（也就是X軸和Y軸同時移動）

2）translateX(x)僅水平方向移動（X軸移動）

3）translateY(Y)僅垂直方向移動（Y軸移動）

實例演示：通過translate()函數將元素向Y軸下方移動50px,X軸右方移動100px。

HTML代碼：

<div class="wrapper">
<div>我向右向下移動</div>
</div>

CSS代碼：

.wrapper {
width: 200px;
height: 200px;
border: 2px dotted red;
margin: 20px auto;
}
.wrapper div {
width: 200px;
height: 200px;
line-height: 200px;
text-align: center;
background: orange;
color: #fff;
-webkit-transform: translate(50px,100px);
-moz-transform:translate(50px,100px);
transform: translate(50px,100px);
}

演示結果：

2.2 旋轉 rotate()

旋轉rotate()函數通過指定的角度參數使元素相對原點進行旋轉。旋轉不僅可以是固定的度數，還可以是動態變化的，創造出無限的可能性。

它主要在二維空間內進行操作，設置一個角度值，用來指定旋轉的幅度。如果這個值為正值，元素相對原點中心順時針旋轉；如果這個值為負值，元素相對原點中心逆時針旋轉。如下圖所示：

HTML代碼：

<div class="wrapper">
<div></div>
</div>

CSS代碼：

.wrapper {
width: 200px;
height: 200px;
border: 1px dotted red;
margin: 100px auto;
}
.wrapper div {
width: 200px;
height: 200px;
background: orange;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}

演示結果：

2.3 扭曲 skew()

扭曲skew()函數能夠讓元素傾斜顯示。這種效果常常用于模擬速度感或者傾斜的視覺效果。

它可以將一個對象以其中心位置圍繞著X軸和Y軸按照一定的角度傾斜。這與rotate()函數的旋轉不同，rotate()函數只是旋轉，而不會改變元素的形狀。skew()函數不會旋轉，而只會改變元素的形狀。

Skew()具有三種情況：

1）skew(x,y)使元素在水平和垂直方向同時扭曲（X軸和Y軸同時按一定的角度值進行扭曲變形）；

第一個參數對應X軸，第二個參數對應Y軸。如果第二個參數未提供，則值為0，也就是Y軸方向上無斜切。

2）skewX(x)僅使元素在水平方向扭曲變形（X軸扭曲變形）；

3）skewY(y)僅使元素在垂直方向扭曲變形（Y軸扭曲變形）

示例演示：

通過skew（）函數將長方形變成平行四邊形。

HTML代碼：

<div class="wrapper">
<div>我變成平形四邊形</div>
</div>

CSS代碼：

.wrapper {
width: 300px;
height: 100px;
border: 2px dotted red;
margin: 30px auto;
}
.wrapper div {
width: 300px;
height: 100px;
line-height: 100px;
text-align: center;
color: #fff;
background: orange;
-webkit-transform: skew(45deg);
-moz-transform:skew(45deg)
transform:skew(45deg);
}

演示結果：

2.4 縮放 scale()

縮放 scale()函數讓元素根據中心原點對對象進行縮放。這不僅可以用來模擬放大鏡效果，還可以創造出元素的進入和退出動畫，比如一個圖片慢慢縮小直至消失。

縮放 scale 具有三種情況：

1） scale(X,Y)使元素水平方向和垂直方向同時縮放（也就是X軸和Y軸同時縮放）。

例如：

div:hover {
-webkit-transform: scale(1.5,0.5);
-moz-transform:scale(1.5,0.5)
transform: scale(1.5,0.5);
}

注意：Y是一個可選參數，如果沒有設置Y值，則表示X，Y兩個方向的縮放倍數是一樣的。

2）scaleX(x)元素僅水平方向縮放（X軸縮放）

3）scaleY(y)元素僅垂直方向縮放（Y軸縮放）

HTML代碼：

<div class="wrapper">
<div>我將放大1.5倍</div>
</div>

CSS代碼：

.wrapper {
width: 200px;
height: 200px;
border:2px dashed red;
margin: 100px auto;
}
.wrapper div {
width: 200px;
height: 200px;
line-height: 200px;
background: orange;
text-align: center;
color: #fff;
}
.wrapper div:hover {
opacity: .5;
-webkit-transform: scale(1.5);
-moz-transform:scale(1.5)
transform: scale(1.5);
}

演示結果：

注意：scale()的取值默認的值為1，當值設置為0.01到0.99之間的任何值，作用使一個元素縮小；而任何大于或等于1.01的值，作用是讓元素放大。

2.5 矩陣 matrix()

matrix() 是一個含六個值的(a,b,c,d,e,f)變換矩陣，用來指定一個2D變換，相當于直接應用一個[a b c d e f]變換矩陣。就是基于水平方向（X軸）和垂直方向（Y軸）重新定位元素。

此屬性值使用涉及到數學中的矩陣，我在這里只是簡單的說一下CSS3中的transform有這么一個屬性值，如果需要深入了解，需要對數學矩陣有一定的知識。

示例演示：通過matrix()函數來模擬transform中translate()位移的效果。
HTML代碼：

<div class="wrapper">
<div></div>
</div>

CSS代碼：

.wrapper {
width: 300px;
height: 200px;
border: 2px dotted red;
margin: 40px auto;
}
.wrapper div {
width:300px;
height: 200px;
background: orange;
-webkit-transform: matrix(1,0,0,1,50,50);
-moz-transform:matrix(1,0,0,1,50,50);
transform: matrix(1,0,0,1,50,50);
}

演示結果：

想要快速入門前端開發嗎？推薦一個前端開發基礎課程，這個老師講的特別好，零基礎學習無壓力，知識點結合代碼，邊學邊練，可以免費試看試學，還有各種輔助工具和資料，非常適合新手！點這里前往學習哦！「鏈接」

2.6 原點 transform-origin

任何一個元素都有一個中心點，默認情況之下，其中心點是居于元素X軸和Y軸的50%處。如下圖所示：

在沒有重置transform-origin改變元素原點位置的情況下，CSS變形進行的旋轉、位移、縮放，扭曲等操作都是以元素自己中心位置進行變形。

但很多時候，我們可以通過transform-origin來對元素進行原點位置改變，使元素原點不在元素的中心位置，以達到需要的原點位置。

transform-origin取值和元素設置背景中的background-position取值類似，如下表所示：

示例演示：

通過transform-origin改變元素原點到左上角，然后進行順時旋轉45度。

HTML代碼：

<div>
<div>原點在默認位置處</div>
</div>
<div class="wrapper transform-origin">
<div>原點重置到左上角</div>
</div>

CSS代碼：

.wrapper {
width: 300px;
height: 300px;
float: left;
margin: 100px;
border: 2px dotted red;
line-height: 300px;
text-align: center;
}
.wrapper div {
background: orange;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.transform-origin div {
-webkit-transform-origin: left top;
transform-origin: left top;
}

演示結果：

以上就是css動畫中幾種基本的變形技巧了，掌握這些我們可以操控我們的網頁元素實現我們想要的一些基本動畫效果。

在這個充滿創造力的時代，CSS變形動畫是每個前端開發者必備的技能。它不僅能提升用戶體驗，更能激發設計師和開發者的創意火花。所以，不妨嘗試一下，讓你的網頁動起來，給用戶留下深刻的印象吧！

我們下期再見！

END

文案編輯|云端學長

文案配圖|云端學長

內容由：云端源想分享

程序員分享javascript實現自由編輯圖片代碼詳解，當下我們項目中需要一個可自由編輯圖片的功能，當圖片可能出現需要頻繁編輯，同時能滿足發現裁剪不滿意想要微調的時候，會發現如果我們處理圖片按照平常的習慣，如裁剪后上傳服務器或者轉base64，都是不符合需求的。那么該怎么處理比較好呢？如何以盡量少的網絡請求、少占用存儲來解決應用場景呢？那么，便想到了只用純數據來跟我們的功能打交道。

先安利個裁圖神器cropperjs，個人認為是個易上手，配置和api方法蠻齊全的一個組件庫。

項目內引入，一定不要漏了引用樣式

import Cropper from 'cropperjs';
import 'cropperjs/dist/cropper.css';

這里我們以react為例

 this.state = {
width: 640, //圖片展示寬
height: 360, //圖片展示高
imgWidth: 640, //圖片實際寬
imgHeight: 360, //圖片實際高
imgLeft: 0, //圖片左偏移
imgTop: 0, //圖片上偏移
editing: false //是否編輯中
}
//展示圖片的基本dom結構，我們使用外div內img的形式，來跟數據結合控制裁剪圖片的展示
const { width, height, imgWidth, imgHeight, imgLeft, imgTop, editing } = this.state;
const containerStyle = {
width: `${width}px`,
height: `${height}px`
}
const imgStyle = {
width: `${imgWidth}px`,
height: `${imgHeight}px`,
left: `${imgLeft}px`,
top: `${imgTop}px`
}
.img-container {
overflow: hidden;
position: relative;
}
.crop-img {
position: absolute;
left: 0;
top: 0;
}
<div
className="img-container"
style={containerStyle}
>
<img
className="crop-img"
src={picture}
style={imgStyle}
alt="pic"
></img>
</div>

簡單來說就是外層元素控制裁剪展示的寬高，同時根據項目需求的元素定位也掛在這，內部img掛載圖片實際大小和偏移。

cropperjs初始化后的元素，是會與初始化對象img處在同一dom層級，也就是說如果我們直接對展示img進行初始化的話，編輯區域展示將會受父元素，如圖，放大圖片時候會不方查看超出部分

所以在這里，為了圖片編輯的自由度，建議分開展示dom與用以初始化cropper對象的dom，在這里編輯區域為全屏幕為例，根據項目實際功能區域進行調整

.edit-container {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
<div
className="img-container"
style={containerStyle}
>
<img
className="crop-img"
src={picture}
style={imgStyle}
alt="pic"
></img>
</div>
//cropper初始化
 this.myRef = React.createRef();
 this.myCropper = new Cropper(this.myRef.current, options);
//options配置
const options = {
dragMode: 'move', //使裁剪時圖片可拖動
background: false, //因為我們現在是全屏可編輯，需要隱藏掉默認的背景
}
//當然還有許多常見的配置項，如編輯框尺寸比例等，大家可自行查看api
//裁剪保存
save() {
const cropBoxData = this.myCropper.getCropBoxData(); //獲取裁剪框數據
const canvasData = this.myCropper.getCanvasData(); //獲取圖片數據
 this.setState({
width: cropBoxData.width,
height: cropBoxData.height,
imgLeft: canvasData.left - cropBoxData.left,
imgTop: canvasData.top - cropBoxData.top,
imgWidth: canvasData.width,
imgHeight: canvasData.height
})
}

這樣的話我們就可以完全在自定義的全屏內編輯，保存效果如下，到這里我們就完成了第一部分功能，裁剪并保存數據和展示

重點介紹下我們用到的兩個api方法getCropBoxData和getCanvasData，getCanvasData是用來獲取圖片的實際數據的(當前的寬高，和相對于父元素可視區域的位移偏移量)，getCropBoxData則是獲取相對于圖片區域的裁剪區相關數據。

那么后續的需求接著來了，我們怎么做到二次編輯的時候，能還原效果呢，嗯，其實在前面我們記錄裁圖數據的時候，把相應的數據關系再計算一遍就好了,在初始化cropper的options中增加配置

const options = {
dragMode: 'move',
background: false,
//控件初始化后重置相應配置
ready: () => {
const { width, height, imgWidth, imgHeight, imgLeft, imgTop } = this.state;
//根據實際需要出現裁圖功能進行定位，此處left和top僅為測試暫時默認值定義
const left = 50;
const top = 50;
 this.myCropper.setCanvasData({
width: imgWidth,
height: imgHeight,
left: left,
top: top
});
 this.myCropper.setCropBoxData({
left: left - imgLeft,
top: top - imgTop,
width: width,
height: height
})
}
}

this.myCropper = new Cropper(this.myRef.current, options);

這時候我們再點擊裁圖，就完美還原了，左邊和上邊的間隙就是setCanvasData的top和left，根據實際項目進行調整，setCropBoxData的left和top是相對于cropper-canvas的定位，才有了以上的計算形式。

此時，基本功能到此結束，如果說是應用在h5編輯中，設計到scale縮放的話，相關的數據計算都要算上scale的縮放值哦，不然就會出現展示圖片和編輯圖片大小不對等的狀況。同時還有許多功能就不做展示了，設置裁剪框比例，編輯縮放等，歡迎嘗試。

當然了，如果想要保存圖片，也有相應的方法到處裁剪圖片的數據

this.myCropper.getCroppedCanvas().toDataURL('image/jpeg')

最后，我們可以看到，在整個功能過程中，我們需要的只是裁剪的數據，讀寫快，也不需要進行額外的圖片存儲，減少文件服務器存儲的開銷與優化。

在線咨詢

上一篇：css定義li 圖片開頭是如何完成的？
下一篇：html+css3+js 創意設計-滑動登錄頁面

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

css3D旋轉相冊

一、什么是CSS變形動畫？

二、變形操作

2.2 旋轉 rotate()

2.3 扭曲 skew()

2.4 縮放 scale()

2.5 矩陣 matrix()

2.6 原點 transform-origin

您的項目需求