建站
咨詢
售后
建站咨詢
新聞中心
這篇文章主要介紹“HTML與CSS中2D轉(zhuǎn)換模塊怎么用”，在日常操作中，相信很多人在HTML與CSS中2D轉(zhuǎn)換模塊怎么用問(wèn)題上存在疑惑，小編查閱了各式資料，整理出簡(jiǎn)單好用的操作方法，希望對(duì)大家解答”HTML與CSS中2D轉(zhuǎn)換模塊怎么用”的疑惑有所幫助！接下來(lái)，請(qǐng)跟著小編一起來(lái)學(xué)習(xí)吧！
創(chuàng)新互聯(lián)建站是專業(yè)的紫云網(wǎng)站建設(shè)公司，紫云接單;提供網(wǎng)站建設(shè)、網(wǎng)站制作,網(wǎng)頁(yè)設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行紫云網(wǎng)站開(kāi)發(fā)網(wǎng)頁(yè)制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛(ài)的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來(lái)合作!
一.2D轉(zhuǎn)換模塊
2D轉(zhuǎn)換模塊
/*其中deg是單位,代表多少度*/
transform:rotate(45deg);/*
第一個(gè)參數(shù):水平方向
第二個(gè)參數(shù):垂直方向
*/transform:translate(100px,0px);/*
第一個(gè)參數(shù):水平方向
第二個(gè)參數(shù):垂直方向
注意點(diǎn):
如果取值是1,代表不變
如果取值大于1,代表需要放大
如果取值小于1,代表需要縮小
如果水平和垂直縮放都一樣,那么可以簡(jiǎn)寫為一個(gè)參數(shù)
*//*transform:scale(0.5,0.5);*/transform:scale(1.5);/*
注意點(diǎn):
1.如果需要進(jìn)行多個(gè)轉(zhuǎn)換,那么用空格隔開(kāi)
2.2D的轉(zhuǎn)換模塊會(huì)修改元素的坐標(biāo)系,所以旋轉(zhuǎn)之后再平移就不是水平平移的
*/transform:rotate(45deg)translate(100px,0px);
2D轉(zhuǎn)換模塊
1.png
二.2D轉(zhuǎn)換模塊-形變中心點(diǎn)
默認(rèn)情況下所有的元素都是以自己的中心點(diǎn)作為參考來(lái)旋轉(zhuǎn)的,我們可以通過(guò)形變中心點(diǎn)屬性來(lái)修改它的參考點(diǎn)
/*
第一個(gè)參數(shù):水平方向
第二個(gè)參數(shù):垂直方向
注意點(diǎn)
取值有三種形式
具體像素
百分比
特殊關(guān)鍵字
*/
/*transform-origin:200px0px;*/
/*transform-origin:50%50%;*/
/*transform-origin:0%0%;*/
/*transform-origin:centercenter;*/
transform-origin:lefttop;
2.png
三.透視屬性(perspective:500px;)和旋轉(zhuǎn)軸向(transform:rotateY(45deg);)
1.perspective:500px;
1.1什么是透視
近大遠(yuǎn)小
1.2.注意點(diǎn)
一定要注意,透視屬性必須添加到需要呈現(xiàn)近大遠(yuǎn)小效果的元素的父元素上面
2.transform:rotateY(45deg);
想圍繞哪個(gè)軸旋轉(zhuǎn),那么只需要在rotate后面加上哪個(gè)軸即可;
代碼示例:
- 
- 
- 