CSS函數translate、translate3d的使用

ranslate()和translate3d()函數可以實現元素在指定軸的平移的功能。函數使用在CSS轉換屬性transform的屬性值。實現轉換的函數類型有：

translate()：2D平面實現X軸、Y軸的平移
translate3d()：3D空間實現位置的平移
translateX()：實現X軸方向的元素移動
translateY()：實現Y軸方向的元素移動

translate()

translate()函數用于移動元素在2D平面的位置，其語法格式如下：

translate(tx)       或
translate(tx, ty)

tx：需要移動的x軸距離
ty：需要移動的y軸距離

示例代碼如下：

<style>
.container .translate>div>div {
    display: inline-block;
    padding: 30px;
    background-color: aqua;
}
.container .translate>div>.result {
    transform: translate(-10px,10px);
    background-color: red;
}

</style>

<div class="translate">
   <h3>translate函數使用</h3>
   <div>
       <div class="original ">original container</div>
       <div class="result">translate函數使用(100,200) container</div>
   </div>
</div>

展示結果：

CSS3中，可以利用transform功能來實現文字或圖像的旋轉、縮放、傾斜、移動這四種類型的變形處理，本文將對此做詳細介紹。

一.旋轉 rotate

用法：transform: rotate(45deg);

共一個參數“角度”，單位deg為度的意思，正數為順時針旋轉，負數為逆時針旋轉，上述代碼作用是順時針旋轉45度。

二.縮放 scale

用法：transform: scale(0.5) 或者 transform: scale(0.5, 2);

參數表示縮放倍數；

一個參數時：表示水平和垂直同時縮放該倍率
兩個參數時：第一個參數指定水平方向的縮放倍率，第二個參數指定垂直方向的縮放倍率。

三.傾斜 skew

用法：transform: skew(30deg) 或者 transform: skew(30deg, 30deg);

參數表示傾斜角度，單位deg

一個參數時：表示水平方向的傾斜角度；
兩個參數時：第一個參數表示水平方向的傾斜角度，第二個參數表示垂直方向的傾斜角度。

關于skew傾斜角度的計算方式表面上看并不是那么直觀，這里借鑒某大拿繪制的圖舉例說明一下：

首先需要說明的是skew的默認原點transform-origin是這個物件的中心點

四.移動 translate

用法：transform: translate(45px) 或者 transform: translate(45px, 150px);

參數表示移動距離，單位px，

一個參數時：表示水平方向的移動距離；
兩個參數時：第一個參數表示水平方向的移動距離，第二個參數表示垂直方向的移動距離。

五.基準點 transform-origin

在使用transform方法進行文字或圖像的變形時，是以元素的中心點為基準點進行的。使用transform-origin屬性，可以改變變形的基準點。

用法：transform-origin: 10px 10px;

共兩個參數，表示相對左上角原點的距離，單位px，第一個參數表示相對左上角原點水平方向的距離，第二個參數表示相對左上角原點垂直方向的距離；

兩個參數除了可以設置為具體的像素值，其中第一個參數可以指定為left、center、right，第二個參數可以指定為top、center、bottom。

六.多方法組合變形

上面我們介紹了使用transform對元素進行旋轉、縮放、傾斜、移動的方法，這里講介紹綜合使用這幾個方法來對一個元素進行多重變形。

用法：transform: rotate(45deg) scale(0.5) skew(30deg, 30deg) translate(100px, 100px);

這四種變形方法順序可以隨意，但不同的順序導致變形結果不同，原因是變形的順序是從左到右依次進行，這個用法中的執行順序為1.rotate 2.scalse 3.skew 4.translate

以上內容來源于網路侵刪~

言：

圣誕節快到了，是不是要給女朋友或者正在追求的妹子一點小驚喜呢，今天這篇博客就分享下前端代碼如何實現3D立體動態相冊。趕緊學會了，來制作屬于我們程序員的浪漫吧！先上效果圖，來引起下你們的興趣。

正文：

一、新建一個index.html的文件，代碼如下

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>純CSS實現鼠標經過3D立體動態展示圖片特效代碼</title>
<link type="text/css" href="css/style.css" rel="stylesheet" />
</head>
<body>
<div class="box">
	<ul class="minbox">
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
	<ol class="maxbox">
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ol>
</div>
</body>
</html>

二、css樣式的代碼

@charset "utf-8";
*{
	margin:0;
	padding:0;
}
body{
	max-width: 100%;
	min-width: 100%;
	height: 100%;
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size:100% 100%;
	position: absolute;
	margin-left: auto;
	margin-right: auto;
}
li{
	list-style: none;
}
.box{
	width:200px;
	height:200px;
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size:100% 100%;
	position: absolute;
	margin-left: 42%;
	margin-top: 22%;
	-webkit-transform-style:preserve-3d;
	-webkit-transform:rotateX(13deg);
	-webkit-animation:move 5s linear infinite;
}
.minbox{
	width:100px;
	height:100px;
	position: absolute;
	left:50px;
	top:30px;
	-webkit-transform-style:preserve-3d;
}
.minbox li{
	width:100px;
	height:100px;
	position: absolute;
	left:0;
	top:0;
}
.minbox li:nth-child(1){
	background: url(../img/01.png) no-repeat 0 0;
	-webkit-transform:translateZ(50px);
}
.minbox li:nth-child(2){
	background: url(../img/02.png) no-repeat 0 0;
	-webkit-transform:rotateX(180deg) translateZ(50px);
}
.minbox li:nth-child(3){
	background: url(../img/03.png) no-repeat 0 0;
	-webkit-transform:rotateX(-90deg) translateZ(50px);
}
.minbox li:nth-child(4){
	background: url(../img/04.png) no-repeat 0 0;
	-webkit-transform:rotateX(90deg) translateZ(50px);
}
.minbox li:nth-child(5){
	background: url(../img/05.png) no-repeat 0 0;
	-webkit-transform:rotateY(-90deg) translateZ(50px);
}
.minbox li:nth-child(6){
	background: url(../img/06.png) no-repeat 0 0;
	-webkit-transform:rotateY(90deg) translateZ(50px);
}
.maxbox li:nth-child(1){
	background: url(../img/1.png) no-repeat 0 0;
	-webkit-transform:translateZ(50px);
}
.maxbox li:nth-child(2){
	background: url(../img/2.png) no-repeat 0 0;
	-webkit-transform:translateZ(50px);
}
.maxbox li:nth-child(3){
	background: url(../img/3.png) no-repeat 0 0;
	-webkit-transform:rotateX(-90deg) translateZ(50px);
}
.maxbox li:nth-child(4){
	background: url(../img/4.png) no-repeat 0 0;
	-webkit-transform:rotateX(90deg) translateZ(50px);
}
.maxbox li:nth-child(5){
	background: url(../img/5.png) no-repeat 0 0;
	-webkit-transform:rotateY(-90deg) translateZ(50px);
}
.maxbox li:nth-child(6){
	background: url(../img/6.png) no-repeat 0 0;
	-webkit-transform:rotateY(90deg) translateZ(50px);
}
.maxbox{
	width: 800px;
	height: 400px;
	position: absolute;
	left: 0;
	top: -20px;
	-webkit-transform-style: preserve-3d;
	
}
.maxbox li{
	width: 200px;
	height: 200px;
	background: #fff;
	border:1px solid #ccc;
	position: absolute;
	left: 0;
	top: 0;
	opacity: 0.2;
	-webkit-transition:all 1s ease;
}
.maxbox li:nth-child(1){
	-webkit-transform:translateZ(100px);
}
.maxbox li:nth-child(2){
	-webkit-transform:rotateX(180deg) translateZ(100px);
}
.maxbox li:nth-child(3){
	-webkit-transform:rotateX(-90deg) translateZ(100px);
}
.maxbox li:nth-child(4){
	-webkit-transform:rotateX(90deg) translateZ(100px);
}
.maxbox li:nth-child(5){
	-webkit-transform:rotateY(-90deg) translateZ(100px);
}
.maxbox li:nth-child(6){
	-webkit-transform:rotateY(90deg) translateZ(100px);
}
.box:hover ol li:nth-child(1){
	-webkit-transform:translateZ(300px);
	width: 400px;
	height: 400px;
	opacity: 0.8;
	left: -100px;
	top: -100px;
}
.box:hover ol li:nth-child(2){
	-webkit-transform:rotateX(180deg) translateZ(300px);
	width: 400px;
	height: 400px;
	opacity: 0.8;
	left: -100px;
	top: -100px;
}
.box:hover ol li:nth-child(3){
	-webkit-transform:rotateX(-90deg) translateZ(300px);
	width: 400px;
	height: 400px;
	opacity: 0.8;
	left: -100px;
	top: -100px;
}
.box:hover ol li:nth-child(4){
	-webkit-transform:rotateX(90deg) translateZ(300px);
	width: 400px;
	height: 400px;
	opacity: 0.8;
	left: -100px;
	top: -100px;
}
.box:hover ol li:nth-child(5){
	-webkit-transform:rotateY(-90deg) translateZ(300px);
	width: 400px;
	height: 400px;
	opacity: 0.8;
	left: -100px;
	top: -100px;
}
.box:hover ol li:nth-child(6){
	-webkit-transform:rotateY(90deg) translateZ(300px);
	width: 400px;
	height: 400px;
	opacity: 0.8;
	left: -100px;
	top: -100px;
}
@keyframes move{
	0%{
		-webkit-transform: rotateX(13deg) rotateY(0deg);
	}
	100%{
		-webkit-transform:rotateX(13deg) rotateY(360deg);
	}
}

三、文件的目錄結構，把css文件放到css文件夾里，圖片放到img文件夾里。

四、圖片尺寸不會修改的，可以選擇使用美圖秀秀網頁版很簡單

五、容易出現的問題，圖片展示不全或展示的方向不對

1.圖片尺寸需要修改（解決展示不全的情況）

上圖是我的圖片文件夾里放的圖片，首先01-06編號命名的圖片尺寸是100x100px的大小的，1-6編號是400x400px，如果效果想展示最佳，100x100px的圖片是以頭部特寫的照片最好，因為01-06是立體照片內部小正方體的照片，1-6編號是外部正方體的照片。

2.圖片的方向需要修改（解決頭朝下的問題）

修改的方向如上圖展示所示，比如第三張頭就應該朝下，否則形成的效果圖像會出現頭是倒著的情況。

六、放一下動態效果圖

總結：

生活雖然總有辛酸，但是我們不應該減少去創造生活的樂趣，不斷尋找屬于自己的那份快樂，才應該是我們生活的態度。

我自己是一名從事了多年開發的web前端老程序員，目前辭職在做自己的web前端私人定制課程，今年年初我花了一個月整理了一份最適合2019年學習的web前端學習干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關注我的頭條號并在后臺私信我：前端，即可免費獲取。

原文鏈接：https://blog.csdn.net/jdk_wangtaida/article/details/103253883

在線咨詢

上一篇：HTML 表格
下一篇：前端設計-教你如何快速繪制HTML5動畫

您的項目需求

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

整合營銷服務商

CSS函數translate、translate3d的使用

translate()

您的項目需求