CSS3 变形
CSS3变形是一些效果的集合，比如平移，旋转，缩放和倾斜效果，每个效果都称为变形函数。
transform
transform属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
transform:none | <transform-function> [<transform-function>] *
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style> div{ width:100px; height:100px; margin:40px; position:absolute; opacity:1; background:rgb(0, 148, 255); } .box2{ background:rgb(0, 148, 255); opacity:.5; /*旋转45度*/ transform:rotate(45deg); }</style></head><body><div class="box1"></div> <div class="box2"></div> </body></html> 旋转
缩放
.box2{ ... /*放大了1.5倍*/ transform:scale(1.5);} 位移
.box2{ ... /*X轴与Y轴都移动150px*/ transform:translate(150px,150px);} 倾斜
.box2{ ... /*X轴倾斜30度*/ transform:skew(30deg);} transform-origin
用来指定元素的中心点位置。
transform-origin:x-axis y-axis z-axis
transform进行变形时，默认是以元素自己中心点为原点进行变形的。通过transform-origin属性可以改变元素的中心点，从而以我们指定的点为中心点进行变形。
.box2{ ... transform-origin:left top;} 上例中，元素的中心点从默认的中间点center改为左上角点left top。就是说以左上角的点为基点进行变形。很简单吧，其他位置的点俺就不一一示范了，另外transform-origin不能改变translate的中点。
transform-style
transform-style属性规定如何在3D空间中呈现被嵌套的元素。
transform-style:flat | preserver-3d
简单来说，就是能够创建一个3D空间。让子元素在3D空间中变形。
perspective
perspective 属性用来设置用户和元素3D空间Z平面之间的距离。值越小，3D效果越明显。
perspective:none | number
当元素定义perspective属性时，其子元素会获得透视效果，而不是元素本身。如果不指定透视，则Z轴空间中的所有点将平铺到同一个2D平面中。
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style> /*没有添加perspective时效果*/ #box1 div{ position:absolute; } #box1 div img{ transform-origin:bottom; } #box1 .box1-1 img{ opacity:.5; } #box1 .box1-2 img{ transform:rotateX(45deg); } /*添加perspective时效果*/ #box2 div{ position:absolute; left:400px; perspective:500px; } #box2 div img{ transform-origin:bottom; } #box2 .box2-1 img{ opacity:.5; } #box2 .box2-2 img{ transform:rotateX(45deg); }</style></head><body><div id="box1"> <div class="box1-1"><img src="/static/imghwm/default1.png" data-src="https://img.alicdn.com/imgextra/i4/2406102577/TB28gKadVXXXXbmXXXXXXXXXXXX_!!2406102577.png" class="lazy" alt="CSS3 变形记_html/css_WEB-ITnose" ></div> <div class="box1-2"><img src="/static/imghwm/default1.png" data-src="https://img.alicdn.com/imgextra/i4/2406102577/TB28gKadVXXXXbmXXXXXXXXXXXX_!!2406102577.png" class="lazy" alt="CSS3 变形记_html/css_WEB-ITnose" ></div></div><div id="box2"> <div class="box2-1"><img src="/static/imghwm/default1.png" data-src="https://img.alicdn.com/imgextra/i4/2406102577/TB28gKadVXXXXbmXXXXXXXXXXXX_!!2406102577.png" class="lazy" alt="CSS3 变形记_html/css_WEB-ITnose" ></div> <div class="box2-2"><img src="/static/imghwm/default1.png" data-src="https://img.alicdn.com/imgextra/i4/2406102577/TB28gKadVXXXXbmXXXXXXXXXXXX_!!2406102577.png" class="lazy" alt="CSS3 变形记_html/css_WEB-ITnose" ></div></div></body></html> 可见，设置了perspective的元素，其3D效果更加明显了。
另外，在3D变形中，除了perspective属性可以激活一个3D空间之外，在3D变形的函数中的perspective()也可以激活3D空间。不同的是，perspective属性用在父元素中，perspective()函数用在当前的子元素中，并且与transform中的其他的函数一起使用。如：
transform:rotate(45deg) perspective(500px);
其效果是一样的。
perspective-origin
用来决定perspective属性的起点位置就，简单说就是观看的视角。
perspective-origin: x-axis y-axis;
perspective-origin与perspective属性一样，必须定义在父元素的元素上。换句话说，perspective-origin是与perspective结合使用的。
#box2 div{ ... perspective-origin:bottom right;} 右下角效果
左下角效果
左上角效果
右上角效果
上角效果
右角效果
下角效果
左角效果
默认值，中角。
backface-visibility
backface-visibility属性定义当元素不面向屏幕时是否可见。如果在旋转元素不希望看到背面时，该属性很有用。
backface-visibility:visible | hidden;
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style> @keyframes rotate{ 0%{ transform:rotateY(0deg); } 100%{ transform:rotateY(360deg); } } #box1,#box2{ width:300px; height:400px; float:left; margin:0 20px; transform-style: preserve-3d; animation:rotate 3s ease-in-out infinite alternate; } div div { perspective: 1000px; position:absolute; top:0; right:0; bottom:0; left:0; } #box1 div{ /*第一个图片背面不可见*/ backface-visibility: hidden; } #box1 .box1-1,#box2 .box2-1{ background:url(https://img.alicdn.com/imgextra/i4/2406102577/TB28gKadVXXXXbmXXXXXXXXXXXX_!!2406102577.png)no-repeat 0 0 / 100% 100%; z-index:2; } #box1 .box1-2,#box2 .box2-2{ background:url(https://img.alicdn.com/imgextra/i2/2406102577/TB2cgJ7dVXXXXb3XXXXXXXXXXXX_!!2406102577.png)no-repeat 0 0 / 100% 100%; transform:rotateY(180deg); }</style></head><body><div id="box1"> <div class="box1-1"></div> <div class="box1-2"></div></div><div id="box2"> <div class="box2-1"></div> <div class="box2-2"></div></div></body></html> 两个图片正面时可见并无什么变化
两个图片反面时，设置了背面不可见的图片隐藏了正面。
将代码复制下来在浏览器中观看，可以更好了解。
CSS3 2D变形
2D位移
translate()函数可以把元素从原来的位置移动。
translate(x-axis,y-axis);
translate()函数可以取一个值x-axis，也可以取两个值x-axis,y-axis。
当取一个值时，x-axis代表X轴移动的距离，正值时元素向右移动，负值向左移动。
当取二个值是，x-axis一样；y-axis代表Y轴，正值时元素向下移动，负值向上移动。
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style> @-webkit-keyframes translate{ from{ transform:translate(0); } 20%{ transform:translate(100px); } 40%{ transform:translate(100px,100px); } 60%{ transform:translate(200px,100px); } 80%{ transform:translate(200px,200px); } 100%{ transform:translate(300px,200px); } } @keyframes translate{ from{ transform:translate(0); } 20%{ transform:translate(100px); } 40%{ transform:translate(100px,100px); } 60%{ transform:translate(200px,100px); } 80%{ transform:translate(200px,200px); } 100%{ transform:translate(300px,200px); } } div{ width:100px; height:100px; background:hsl(102, 100%, 50%); -webkit-animation:translate 1s ease infinite alternate; animation:translate 1s ease infinite alternate; }</style></head><body> <div></div></body></html> 下面是两张图片的位移效果，建议将代码复制在浏览器中观看。
如果要将对象沿着X轴或者Y轴方向移动，除了可以使用translate(x-axis,0)和translate(0,y-axis)来实现。还可以使用translateX()与translateY()两个函数。
translateX(100px)等于translate(100px,0)translateY(100px)等于translate(0,100px)
2D缩放
缩放函数scale()让元素根据中心原点对元素进行缩放。
scale(x-axis,y-axis);
scale()函数与translate()函数的语法相似，可以接受一个值，也可以接受两个值，只有一个值时，第二个值与第一个值一样，也就是说X轴与Y轴成比例缩放。默认值为1，当值小于1时，元素缩小；当值大于1时，元素放大。
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style> @-webkit-keyframes scale{ from{ transform:scale(-3); } 100%{ transform:scale(5); } } @keyframes scale{ from{ transform:scale(-3); } 100%{ transform:scale(5); } } div{ position:absolute; left:40%; top:40%; width:70px; height:100px; background:url(https://img.alicdn.com/imgextra/i2/2406102577/TB24namdVXXXXbXXXXXXXXXXXXX_!!2406102577.png) no-repeat scroll 0 0 / 100% 100%; -webkit-animation:scale 1s ease infinite alternate; animation:scale 3s ease infinite alternate; }</style></head><body><div></div></body></html> scale()函数除了可以取正值，还可以取负值。负值时，会让元素翻转后再进行缩放。下面是两张动画片段，可以复制在浏览器中观看。
除了能通过scale()函数使元素在X轴和Y轴进行缩放之外，还可以使用scaleX()与scaleY()两个函数分别在X轴与Y轴缩放。
scaleX(2)相当于scale(2,1)scaleY(2)相当于scale(1,2)
另外，缩放函数默认是以中心点为原点进行变形，可以使用transform-origin函数，修改元素的中心点，使缩放函数的效果不同。
2D倾斜
倾斜函数skew()能够让元素倾斜显示。与rotate()函数不同，rotate()函数只能旋转，不能改变元素形状；skew()函数不能旋转，当会改变元素形状。
skew(x-axis,y-axis)
x-axis表示元素X轴倾斜的角度。
y-axis表示元素Y轴倾斜的角度。
与前几个函数一样，当只有一个值时，表示的是X轴进行倾斜；二个值时，X轴与Y轴同时倾斜。
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style> div { width: 100px; height: 100px; background: hsl(102, 100%, 50%); transform:skew(30deg); }</style></head><body><div></div></body></html> 元素X轴倾斜效果
div { ... transform:skew(0,30deg);} 元素Y轴倾斜效果
div { ... transform:skew(30deg,30deg);} 元素X轴与Y轴同时倾斜效果
除了使用scale()函数使X轴与Y轴倾斜之外，还可以使用scaleX()与scaleY()函数让元素在X轴与Y轴倾斜。
scaleX(30deg)等于scale(30deg,0)scaleY(30deg)等于scale(0,30deg)
还可以使用transform-origin属性修改元素变形的中心点，让元素有不同的倾斜效果。
2D矩阵
俺正在学习当中。点我我也要去学。
CSS3 3D变形
3D位移
CSS3中3D位移主要包括两种函数translateZ()和translate3d()。
translateZ(z-axis);
功能是让元素在3D空间沿Z轴进行位移。负值时，元素在视觉上感觉越来越远，导致元素变小；正值时，元素在视觉上感觉越来越近，导致元素变大了。代码效果translate3d()函数中。
translate3d(x-axis,y-axis,z-axis);
translate3d()函数使一个元素在三维空间移动。是translateX(),translateY(),translateZ()三个函数的缩写，与translate()函数不同的是，translate()函数只能作用在X轴与Y轴上，也就是在二维平面上移动。
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style> @-webkit-keyframes translate3d { 0% { transform: translate3d(-30px,-20px,-300px); } 100% { transform: translate3d(30px,20px,200px); } } @keyframes translate3d { 0% { transform: translate3d(-30px,-20px,-300px); } 100% { transform: translate3d(30px,20px,200px); } } body { transform-style: preserve-3d; perspective: 1000px; } .box1 { position:absolute; width: 70px; height: 100px; background: url(https://img.alicdn.com/imgextra/i4/2406102577/TB28gKadVXXXXbmXXXXXXXXXXXX_!!2406102577.png) no-repeat 0 0 / 100% 100%; -webkit-animation: translate3d 2s ease-in-out infinite alternate; animation: translate3d 2s ease-in-out infinite alternate; position:absolute; top:30px; left:20%; } .box2{ background: url(https://img.alicdn.com/imgextra/i4/2406102577/TB28gKadVXXXXbmXXXXXXXXXXXX_!!2406102577.png) no-repeat 0 0 / 100% 100%; opacity:.5; width: 70px; height: 100px; position:absolute; top:30px; left:20%; }</style></head><body><div class="box1"></div><div class="box2"></div></body></html> 下面是两张动画片段,图中可以看出Z轴的移动对视觉上的效果。
3D缩放
CSS3 3D变形中的缩放主要有scaleZ()和scale3d()两种函数。
scaleZ(z-axis);
让元素在Z轴上按比例缩放。
scale3d(x-axis,y-axis,z-axis);
是scaleX，scaleY，scaleZ三个函数的缩写，scaleZ(2)等于scale3d(1,1,2)。与scale函数不同的是，scale()是在二维平面上进行缩放。scale3d()在三维空间上进行缩放。scale3d()与scaleZ()要与其他函数一起使用才有效果。
建议在使用transform调用函数时，scale3d()或scaleZ()要写在其他函数之前，不然也没有效果。
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style> @keyframes scale3d{ 0%{ transform:scale3d(1,1,-10) rotateX(0); } 100%{ transform:scale3d(1,1,2) rotateX(40deg); } } html,body{ transform-style: preserve-3d; perspective: 1200px; } div{ width: 70px; height: 100px; position:absolute; } .box1{ left:40%; top:40px; background:url(https://img.alicdn.com/imgextra/i4/2406102577/TB28gKadVXXXXbmXXXXXXXXXXXX_!!2406102577.png) no-repeat scroll 0 0 /100% 100%; z-index:2; animation:scale3d 1s ease-in-out infinite alternate; } .box2{ left:40%; top:40px; opacity:.5; background:url(https://img.alicdn.com/imgextra/i4/2406102577/TB28gKadVXXXXbmXXXXXXXXXXXX_!!2406102577.png) no-repeat scroll 0 0 /100% 100%; }</style></head><body><div class="box1"></div><div class="box2"></div></body></html> 下面是动画片段
3D旋转
CSS3中3D旋转可以使用rotateX(),rotateY(),rotateZ()三个函数分别设置三维空间的旋转。也可以使用rotate3d()函数集中进行设置，因为效果都是一样的，俺就选rotate3d()函数来说。
rotate3d(x,y,z,deg);
x,y,z代表旋转的三个轴，取值是0或1，0时代表这个轴不旋转，1时代表这个轴旋转。deg代表旋转的角度。
rotateX(45deg)等于rotate3d(1,0,0,45deg)rotateY(45deg)等于rotate3d(0,1,0,45deg)rotateZ(45deg)等于rotate3d(0,0,1,45deg)rotateX(45deg);rotateY(45deg);等于rotate3d(1,1,0,45deg)...
<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" /><title></title><style> @keyframes rotate3d{ 0%{ transform:rotate3d(0,0,0,0); } 100%{ transform:rotate3d(1,1,1,45deg); } } html,body{ transform-style: preserve-3d; perspective: 1200px; } div{ width: 70px; height: 100px; position:absolute; } .box1{ left:40%; top:40px; background:url(https://img.alicdn.com/imgextra/i4/2406102577/TB28gKadVXXXXbmXXXXXXXXXXXX_!!2406102577.png) no-repeat scroll 0 0 /100% 100%; z-index:2; animation:rotate3d 1s ease-in-out infinite alternate; } .box2{ left:40%; top:40px; opacity:.5; background:url(https://img.alicdn.com/imgextra/i4/2406102577/TB28gKadVXXXXbmXXXXXXXXXXXX_!!2406102577.png) no-repeat scroll 0 0 /100% 100%; }</style></head><body><div class="box1"></div><div class="box2"></div></body></html> 下面是动画片段
3D矩阵
学习中...
CSS3 变形就写到此了。
总结一下最近写博客的感想。以前不写博客时，一本书几天就能看完，而且自己又光看不练，且又不爱复习，那过几天立马就忘得干净了。多次吃亏之下，决定写博客，做笔记。写博客的这几天，一个字“累”，以往看书时感觉不过尔尔，简单的很，等到自己写，就糟了，感觉左也不对，右也是错，这时才知道难啊。写出来后欢心鼓舞，好不快乐。写博客累，却是实在。子曰：学而不思则罔。唯有自己想出来，写下来，才不会迷惑。乡下人言语粗鄙，不知所云。
為什麼HTML屬性對Web開發很重要？May 12, 2025 am 12:01 AMhtmlattributesarecrucialinwebdevelopment forcontrollingBehavior，外觀和功能
Alt屬性的目的是什麼？為什麼重要？May 11, 2025 am 12:01 AMalt屬性是HTML中標籤的重要部分，用於提供圖片的替代文本。 1.當圖片無法加載時，alt屬性中的文本會顯示，提升用戶體驗。 2.屏幕閱讀器使用alt屬性幫助視障用戶理解圖片內容。 3.搜索引擎索引alt屬性中的文本，提高網頁的SEO排名。
HTML，CSS和JavaScript：示例和實際應用May 09, 2025 am 12:01 AMHTML、CSS和JavaScript在網頁開發中的作用分別是：1.HTML用於構建網頁結構；2.CSS用於美化網頁外觀；3.JavaScript用於實現動態交互。通過標籤、樣式和腳本，這三者共同構築了現代網頁的核心功能。
如何在標籤上設置lang屬性？為什麼這很重要？May 08, 2025 am 12:03 AM設置標籤的lang屬性是優化網頁可訪問性和SEO的關鍵步驟。 1)在標籤中設置lang屬性，如。 2)在多語言內容中，為不同語言部分設置lang屬性，如。 3)使用符合ISO639-1標準的語言代碼，如"en"、"fr"、"zh"等。正確設置lang屬性可以提高網頁的可訪問性和搜索引擎排名。
HTML屬性的目的是什麼？May 07, 2025 am 12:01 AMhtmlattributeseresene forenhancingwebelements'functionalityandAppearance.TheyAdDinformationTodeFineBehavior，外觀和互動，使網站互動，響應式，visalalyAppealing.AttributesLikutesLikeSlikEslikesrc，href，href，href，類，類型，類型，和dissabledtransfransformformformformformformformformformformformformformformforment
您如何在HTML中創建列表？May 06, 2025 am 12:01 AMtoCreateAlistInHtml，useforforunordedlistsandfororderedlists：1）forunorderedlists，wrapitemsinanduseforeachItem，RenderingeringAsabulletedList.2）fororderedlists，useandfornumberedlists，useandfornumberedlists，casundfornumberedlists，casundfornthetthetthetthetthetthetthetttributefordforderfordforderforderentnumberingsnumberingsnumberingStys。
HTML行動：網站結構的示例May 05, 2025 am 12:03 AMHTML用於構建結構清晰的網站。 1)使用標籤如、、定義網站結構。 2)示例展示了博客和電商網站的結構。 3)避免常見錯誤如標籤嵌套不正確。 4)優化性能通過減少HTTP請求和使用語義化標籤。
您如何將圖像插入HTML頁面？May 04, 2025 am 12:02 AMtoinsertanimageIntoanhtmlpage，usethetagwithsrcandaltattributes.1）usealttextforAcccessibilityandseo.2）instementRcsetForresponSiveImages.3）applylazyloadingWithLoadingWithLoading =“ lazy” tooptimizeperformance.4）tooptimizeperformance.4）
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
SublimeText3 英文版
推薦：為Win版本，支援程式碼提示！
EditPlus 中文破解版
體積小，語法高亮，不支援程式碼提示功能
ZendStudio 13.5.1 Mac
強大的PHP整合開發環境
Safe Exam Browser
Safe Exam Browser是一個安全的瀏覽器環境，安全地進行線上考試。該軟體將任何電腦變成一個安全的工作站。它控制對任何實用工具的訪問，並防止學生使用未經授權的資源。
VSCode Windows 64位元 下載
微軟推出的免費、功能強大的一款IDE編輯器
