CSS 變形(CSS3 transform)實例詳解
我要評論一、2D變形(CSS3) transform
transform是CSS3中具有顛覆性的特征之一，可以實現(xiàn)元素的位移、旋轉(zhuǎn)、傾斜、縮放，甚至支持矩陣方式，配合過渡和即將學(xué)習(xí)的動畫知識，可以取代大量之前只能靠Flash才可以實現(xiàn)的效果。
變形轉(zhuǎn)換 transform transform 變換 變形的意思 《 transformers 變形金剛》
1、移動 translate(x, y)
translate 移動平移的意思
translate(50px,50px);
使用translate方法來將文字或圖像在水平方向和垂直方向上分別垂直移動50像素。
可以改變元素的位置，x、y可為負值；
translate(x,y)水平方向和垂直方向同時移動（也就是X軸和Y軸同時移動）
translateX(x)僅水平方向移動（X軸移動）
translateY(Y)僅垂直方向移動（Y軸移動）
.box {
width: 499.9999px;
height: 400px;
background: pink;
position: absolute;
left:50%;
top:50%;
transform:translate(-50%,-50%); /* 走的自己的一半 */
}
讓定位的盒子水平居中
2、縮放 scale(x, y)
transform:scale(0.8,1);
可以對元素進行水平和垂直方向的縮放。該語句使用scale方法使該元素在水平方向上縮小了20%，垂直方向上不縮放。
scale(X,Y)使元素水平方向和垂直方向同時縮放（也就是X軸和Y軸同時縮放）
scaleX(x)元素僅水平方向縮放（X軸縮放）
scaleY(y)元素僅垂直方向縮放（Y軸縮放）
scale()的取值默認的值為1，當(dāng)值設(shè)置為0.01到0.99之間的任何值，作用使一個元素縮??；而任何大于或等于1.01的值，作用是讓元素放大
3、旋轉(zhuǎn) rotate(deg)
可以對元素進行旋轉(zhuǎn)，正值為順時針，負值為逆時針；
transform:rotate(45deg);
注意單位是 deg 度數(shù)
transform-origin可以調(diào)整元素轉(zhuǎn)換變形的原點
div{transform-origin: left top;transform: rotate(45deg); } /* 改變元素原點到左上角，然后進行順時旋轉(zhuǎn)45度 */
如果是4個角，可以用 left top這些，如果想要精確的位置， 可以用 px 像素。
div{transform-origin: 10px 10px;transform: rotate(45deg); } /* 改變元素原點到x 為10 y 為10，然后進行順時旋轉(zhuǎn)45度 */
案例旋轉(zhuǎn)楚喬傳
div {
width: 250px;
height: 170px;
border: 1px solid pink;
margin: 200px auto;
position: relative;
?
}
div img {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
transition: all 0.6s;
transform-origin: top right;
}
div:hover img:nth-child(1) { /* 鼠標(biāo)經(jīng)過div 第一張圖片旋轉(zhuǎn) */
transform: rotate(60deg);
}
div:hover img:nth-child(2) {
transform: rotate(120deg);
}
div:hover img:nth-child(3) {
transform: rotate(180deg);
}
div:hover img:nth-child(4) {
transform: rotate(240deg);
}
div:hover img:nth-child(5) {
transform: rotate(300deg);
}
div:hover img:nth-child(6) {
transform: rotate(360deg);
}
4、傾斜 skew(deg, deg)
transform:skew(30deg,0deg);
該實例通過skew方法把元素水平方向上傾斜30度，處置方向保持不變。
可以使元素按一定的角度進行傾斜，可為負值，第二個參數(shù)不寫默認為0。
二、3D變形(CSS3) transform
2d x y
3d x y z
左手坐標(biāo)系
伸出左手，讓拇指和食指成“L”形，大拇指向右，食指向上，中指指向前方。這樣我們就建立了一個左手坐標(biāo)系，拇指、食指和中指分別代表X、Y、Z軸的正方向。如下圖
CSS3中的3D坐標(biāo)系與上述的3D坐標(biāo)系是有一定區(qū)別的，相當(dāng)于其繞著X軸旋轉(zhuǎn)了180度，如下圖
簡單記住他們的坐標(biāo)：
x左邊是負的，右邊是正的
y 上面是負的， 下面是正的
z 里面是負的， 外面是正的
1、rotateX()
就是沿著 x 立體旋轉(zhuǎn).
img {
transition:all 0.5s ease 0s;
}
img:hove {
transform:rotateX(180deg);
}
2、rotateY()
沿著y軸進行旋轉(zhuǎn)
img {
transition:all 0.5s ease 0s;
}
img:hove {
transform:rotateY(180deg);
}
3、rotateZ()
沿著z軸進行旋轉(zhuǎn)
img {
transition:all .25s ease-in 0s;
}
img:hover {
/* transform:rotateX(180deg); */
/* transform:rotateY(180deg); */
/* transform:rotateZ(180deg); */
/* transform:rotateX(45deg) rotateY(180deg) rotateZ(90deg) skew(0,10deg); */
}
三、透視(perspective)
電腦顯示屏是一個2D平面，圖像之所以具有立體感（3D效果），其實只是一種視覺呈現(xiàn)，通過透視可以實現(xiàn)此目的。
透視可以將一個2D平面，在轉(zhuǎn)換的過程當(dāng)中，呈現(xiàn)3D效果。
- 透視原理： 近大遠小 。
- 瀏覽器透視：把近大遠小的所有圖像，透視在屏幕上。
- perspective：視距，表示視點距離屏幕的長短。視點，用于模擬透視效果時人眼的位置
注：并非任何情況下需要透視效果，根據(jù)開發(fā)需要進行設(shè)置。
perspective 一般作為一個屬性，設(shè)置給父元素，作用于所有3D轉(zhuǎn)換的子元素
理解透視距離原理：
translateX(x)
僅水平方向移動**（X軸移動）
主要目的實現(xiàn)移動效果
translateY(y)
僅垂直方向移動（Y軸移動）
translateZ(z)
transformZ的直觀表現(xiàn)形式就是大小變化，實質(zhì)是XY平面相對于視點的遠近變化（說遠近就一定會說到離什么參照物遠或近，在這里參照物就是perspective屬性）。比如設(shè)置了perspective為200px;那么transformZ的值越接近200，就是離的越近，看上去也就越大，超過200就看不到了，因為相當(dāng)于跑到后腦勺去了，我相信你正常情況下，是看不到自己的后腦勺的。
translate3d(x,y,z)
[注意]其中，x和y可以是長度值，也可以是百分比，百分比是相對于其本身元素水平方向的寬度和垂直方向的高度和；z只能設(shè)置長度值
實例代碼
body {
}
.door {
width: 300px;
height: 300px;
margin: 100px auto;
border: 1px solid gray;
perspective: 1000px;
background: url('images/dog.gif') no-repeat cover;
position: relative;
}
.door > div {
box-sizing: border-box;
border: 1px solid black;
}
.left {
float: left;
width: 50%;
height: 100%;
background-color: brown;
transform-origin: left center;
transition: 1s;
position: relative;
}
.left::before {
content: '';
position: absolute;
width: 20px;
height: 20px;
border-radius: 50%;
top: 50%;
right: 0px;
transform: translateY(-10px);
border: 1px solid whitesmoke;
}
.right {
width: 50%;
height: 100%;
float: left;
background-color: brown;
transform-origin: right center;
transition: 1s;
position: relative;
}
.right::before {
content: '';
position: absolute;
width: 20px;
height: 20px;
border-radius: 50%;
top: 50%;
left: 0px;
transform: translateY(-10px);
border: 1px solid whitesmoke;
}
.door:hover .left {
transform: rotateY(-130deg);
}
.door:hover .right {
transform: rotateY(130deg);
}
backface-visibility
backface-visibility 屬性定義當(dāng)元素不面向屏幕時是否可見。
翻轉(zhuǎn)盒子案例
div {
width: 224px;
height: 224px;
margin: 100px auto;
position: relative;
}
div img {
position: absolute;
top: 0;
left: 0;
transition: all 1s;
}
div img:first-child {
z-index: 1;
backface-visibility: hidden; /* 不是正面對象屏幕，就隱藏 */
}
div:hover img {
transform: rotateY(180deg);
}
三角形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三角形</title>
<style type="text/css">
div {
width: 200px;
height: 200px;
transform: rotate(30deg) skewY(30deg) scaleX(0.866);
border-radius: 20%;
margin-top:70px;
overflow: hidden;
border: unset;
}
div::before,
div::after {
content: "";
position: absolute;
width: 200px;
height: 200px;
}
div::before {
border-radius: 20% 20% 20% 55%;
background: #000;
transform: scaleX(1.155) skewY(-30deg) rotate(-30deg) translateY(-42.3%) skewX(30deg) scaleY(0.866) translateX(-24%);
}
div::after {
border-radius: 20% 20% 55% 20%;
background: #000;
transform: scaleX(1.155) skewY(-30deg) rotate(-30deg) translateY(-42.3%) skewX(-30deg) scaleY(0.866) translateX(24%);
}
div::before,
div::after {
background: linear-gradient(#0f0, #03a9f4);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
效果圖
到此這篇關(guān)于CSS 變形(CSS3 transform)實例詳解的文章就介紹到這了,更多相關(guān)CSS3 transform內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
css3中2D轉(zhuǎn)換之有趣的transform形變效果
在CSS3中，transform屬性應(yīng)用于元素的2D或3D轉(zhuǎn)換，可以利用transform功能實現(xiàn)文字或圖像的旋轉(zhuǎn)、縮放、傾斜、移動這4中類型的形變處理，本文給大家介紹css3中2D轉(zhuǎn)換之有趣2022-02-18- 在CSS3中，可以利用transform功能實現(xiàn)文字或圖像的旋轉(zhuǎn)、縮放、傾斜、移動這4中類型的變形處理。本文就詳細的介紹了這4種實現(xiàn)，感興趣的可以了解一下2021-08-05
css3 利用transform-origin 實現(xiàn)圓點分布在大圓上布局及旋轉(zhuǎn)特效
這篇文章主要介紹了css3 利用transform-origin 實現(xiàn)圓點分布在大圓上布局及旋轉(zhuǎn)特效,本文給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可2021-04-29
css3利用transform變形結(jié)合事件完成扇形導(dǎo)航
這篇文章主要介紹了css3利用transform變形結(jié)合事件完成扇形導(dǎo)航,幫助大家更好的制作CSS3特效，美化自身網(wǎng)頁，感興趣的朋友可以了解下2020-10-26- 這篇文章主要介紹了css3 transform過渡抖動問題解決,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)2020-10-23
這篇文章主要介紹了css3 利用transform打造走動的2D時鐘，幫助大家更好的利用cSS3制作特效，美化自身網(wǎng)頁，感興趣的朋友可以了解下2020-10-20
詳解css3使用transform出現(xiàn)字體模糊的解決辦法
這篇文章主要介紹了詳解css3使用transform出現(xiàn)字體模糊的解決辦法,文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小2020-10-16淺析CSS3 中的 transition，transform，translate之間區(qū)別和作用
這篇文章主要介紹了CSS3 中的 transition，transform，translate之間區(qū)別和作用，本文給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友參考下2020-03-26
css3 transform導(dǎo)致子元素固定定位變成絕對定位的方法
這篇文章主要介紹了css3 transform導(dǎo)致子元素固定定位變成絕對定位的方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下2020-03-06
使用 css3 transform 屬性可以輕易的旋轉(zhuǎn)，傾斜，縮放任何元素。接下來通過本文給大家分享使用 css3 transform 屬性來變換背景圖的方法，感興趣的的朋友一起看看吧2019-05-07
