CSS3學習---2d轉換

阿新 • • 發佈：2020-12-19

技術標籤：# css3 css3 移動旋轉

宣告：以下內容為個人學習總結，初衷是方便自己學習複習記錄。如有錯誤之處，煩請多多指正！

2d轉換：

2D 轉換是改變標籤在二維平面上的位置和形狀。

移動：translate
旋轉：rotate
縮放：scale

移動：translate

ransform: translate(x, y)
transform: translateX(n)
transfrom: translateY(n)

特點：

不影響其他元素的位置
100%單位，是相對於本身的寬度和高度來計算

**經典案例：**盒子居中時，“子絕父相”，中，子盒子回退寬高時可設定，見：盒子在頁面中水平垂直方向居中方法總結方法二

旋轉：rotate

/* 單位是：deg */
transform: rotate(度數)

特點：

rotate 裡面跟度數，單位是 deg
角度為正時，順時針，角度為負時，逆時針
預設旋轉的中心點是元素的中心點

經典案例：
實現效果：當滑鼠放上圖片時，圖片旋轉360度
在這裡插入圖片描述
程式碼實現：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content= 
"width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            width: 200px;
            border: 5px solid pink;
            border-radius: 50%;
            /* transform: rotate(45deg); */
            /* 動畫過渡：過渡寫到自身上，誰做動畫給誰加 */
            transition 
: all 0.3s;
        }
        /* 滑鼠經過圖片時，旋轉圖片 */
        
        img:hover {
            transform: rotate(360deg);
        }
    </style>
</head>

<body>
    <img src="imgs/q.png" alt="">
</body>

</html>

CSS3學習---2d轉換

技術標籤：# css3css3移動旋轉宣告：以下內容為個人學習總結，初衷是方便自己學習複習記錄。如有錯誤之處，煩請多多指正！

CSS3：2D轉換之移動translate

技術標籤：CSS筆記html5css3 2D移動其實是2D轉換裡面的一種功能，它可以改變元素在頁面中的位置，類似於postion和margin。

css3動畫-2D轉換

css3轉換可以對元素進行移動、縮放、轉動、拉長和拉伸這篇部落格我們來了解下2D變換方法：

CSS3 2D轉換

轉換是使元素改變形狀、尺寸和位置的一種效果。通過css3 轉換，我們能夠對元素進行移動、縮放、轉動、拉長或拉伸，可以大致分為2D轉換和3D轉換。下面介紹的是2D轉換的相關知識點。

css3中的2D轉換

css32D轉換transform是css3中具有顛覆性的特徵之一，可以實現元素的位移旋轉縮放移動translate 旋轉rotate 縮放scale移動translate 語法：transform:translate(x,y) 或者：transform:translateX(n);transform:tr

一、`2D` 轉換之 `translate`

######一、`2D`轉換之`translate` 1.`2D`轉換 -`2D`轉換是改變標籤在二維平面上的位置和形狀

css(三) 2D轉換

(1)、什麼是CSS3 轉換 CSS3 轉換可以對元素進行移動、縮放、轉動、拉長或拉伸。

CSS3：2D、3D屬性

1、旋轉 rotate transform: rotate(360deg); 旋轉rotate預設是圓心但可以給兩個值，這兩個值不能加逗號，可以規定旋轉的圓心點

H5+CSS3 學習

1.屬性選擇器 2.css3結構偽類選擇器n也可以是關鍵詞 even是偶數 odd是奇數選擇div下面第一個span div後面加空格

CSS樣式更改——2D轉換

前言上篇文章主要講述了CSS樣式更改中的裁剪、Z-Index、清除、改變元素的特性基礎知識，這篇文章我們來介紹下CSS樣式更改中2D轉換的基礎用法。

2D轉換

transform: rotate(30deg)：將元素順時針旋轉30度 -ms-transform: rotate(30deg); /* IE 9 / -webkit-transform: rotate(30deg); / Safari and Chrome */

CSS3學習---動畫

技術標籤：# css3css3動畫宣告：以下內容為個人學習總結，初衷是方便自己學習複習記錄。如有錯誤之處，煩請多多指正！

盒子進行水平垂直居中transform+position，input框的下拉按鈕的設計，transform的2D轉換以及transition過渡效果應用

技術標籤：css3例項csscss3 效果如圖：程式碼展示： <style> * { margin: 0; padding: 0;

ThoughtWorks實驗室寒假訓練第三週總結（CSS3學習總結）

技術標籤：筆記css3 目錄邊框背景文字字型2D轉換3D轉換過渡動畫多列漸變邊框

普歌-赤道團隊:對CSS-2D轉換的總結

技術標籤：csshtmlcss3html5 普歌-赤道團隊：CSS3-2D轉換(移動，旋轉，縮放） CSS-2D轉換是什麼？二維座標系是什麼？一、要了解CSS-2D轉換，首先要明白二維座標系1.位移(translate)2.旋轉(rotate)3.縮放(scale

【CSS】CSS3學習筆記——選擇器

✨CSS 層疊樣式表(英文全稱：Cascading Style Sheets)是一種用來表現HTML（標準通用標記語言的一個應用）或XML（標準通用標記語言的一個子集）等檔案樣式的計算機語言。CSS不僅可以靜態地修飾網頁，還可以配合各種指

【前端】CSS3學習筆記（四）——浮動

✨課程連結【狂神說Java】CSS3最新教程快速入門通俗易懂_嗶哩嗶哩_bilibili ✨學習筆記

【前端】CSS3學習筆記（五）——定位

✨課程連結【狂神說Java】CSS3最新教程快速入門通俗易懂_嗶哩嗶哩_bilibili ✨學習筆記

Java學習型別轉換及變數

型別轉換幾個概念：避免記憶體溢位，即記憶體大小不能超強制轉換型別（高轉低）例：

CSS 2D轉換基礎

2D轉換transform 2d轉換就是在平面內對元素進行移動、縮放、旋轉、拉長或拉伸。