css3 transform的旋轉和位移制作太陽花

css3 transform

  • 實例展示
  • 知識點
    • rotate 旋轉
    • translate 位移
    • transform: translate(300px,200px) rotate(90deg)
  • 實例代碼

實例展示

在這里插入圖片描述

知識點

transform的兩個屬性

rotate 旋轉

translate 位移

transform: translate(300px,200px) rotate(90deg)

實例代碼

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style>.circle{position: absolute;top:25%;left:25%;width: 200px;height: 200px;border-radius: 100px;border: red 2px dotted;background-color: yellow;box-sizing: border-box;}.box{width: 400px;height: 400px;position: absolute;left: 0px;right: 0px;background: #eee;}.txt{width: 100px;height: 30px;line-height: 25px;background: yellow;color: red; transform-origin:left center;padding: 0 5px;border: red 2px dotted;box-sizing: border-box;position: absolute;}</style></head><body><div class="box" style="z-index:99; background: transparent;"><div class="txt" style="transform: translate(100px,200px) rotate(180deg)">我愛我的家</div><div class="txt" style="transform: translate(110px,140px) rotate(210deg)">我愛我的家</div><div class="txt" style="transform: translate(150px,100px) rotate(240deg)">我愛我的家</div><div class="txt" style="transform: translate(200px,85px) rotate(-90deg)">我愛我的家</div><div class="txt" style="transform: translate(260px,105px) rotate(-60deg)">我愛我的家</div><div class="txt" style="transform: translate(295px,150px) rotate(-30deg)">我愛我的家</div><div class="txt" style="transform: translate(300px,200px) rotate(0deg)">我愛我的家</div><div class="txt" style="transform: translate(280px,245px) rotate(30deg)">我愛我的家</div><div class="txt" style="transform: translate(250px,270px) rotate(60deg)">我愛我的家</div><div class="txt" style="transform: translate(200px,285px) rotate(90deg)">我愛我的家</div><div class="txt" style="transform: translate(145px,270px) rotate(120deg)">我愛我的家</div><div class="txt" style="transform: translate(115px,240px) rotate(150deg)">我愛我的家</div></div><div class="box" style="z-index:9"><div class="circle"></div><!-- <div class="txt" style="transform: rotate(-30deg);margin-left: -5px;">我愛我的家</div><div class="txt" style="transform: rotate(-10deg);margin-left: 10px;">我愛我的家</div><div class="txt" style="transform: rotate(10deg);margin-left: 10px;">我愛我的家</div><div class="txt" style="transform: rotate(30deg);margin-left: -5px;">我愛我的家</div><div class="txt" style="transform: rotate(50deg);margin-left: -40px;margin-top: 10px;">我愛我的家</div><div class="txt" style="transform: rotate(70deg);margin-left: -85px; margin-top: 0px;">我愛我的家</div> --></div></body>
</html>

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/web/45053.shtml
繁體地址，請注明出處：http://hk.pswp.cn/web/45053.shtml
英文地址，請注明出處：http://en.pswp.cn/web/45053.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

flask 定時任務(APScheduler)使用current_app app_context()上下文

flask 定時任務(APScheduler)使用current_app app_context()上下文

前言: 描述&#xff1a;flask定時任務調用的方法中使用了current_app.logger.info()記錄日志報錯 報錯代碼 raise RuntimeError(unbound_message) from None RuntimeError: Working outside of application context.This typically means that you attempted to use functiona…
閱讀更多...
IDEA中Git常用操作及Git存儲原理

IDEA中Git常用操作及Git存儲原理

Git簡介與使用 Intro Git is a free and open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency. Git是一款分布式版本控制系統&#xff08;VSC&#xff09;&#xff0c;是團隊合作開發…
閱讀更多...
算法學習筆記（8.3）-（0-1背包問題）

算法學習筆記（8.3）-（0-1背包問題）

目錄 最常見的0-1背包問題&#xff1a; 第一步&#xff1a;思考每輪的決策&#xff0c;定義狀態&#xff0c;從而得到dp表 第二步&#xff1a;找出最優子結構&#xff0c;進而推導出狀態轉移方程 第三步&#xff1a;確定邊界條件和狀態轉移順序 方法一&#xff1a;暴力搜素…
閱讀更多...
KBS(Knowledge-Based Systems)期刊投稿記錄

KBS(Knowledge-Based Systems)期刊投稿記錄

記錄一些關鍵時間節點 2023.12.31 投稿 2024.01.30 返回審稿意見 2024.05.20 提交r1 2024.05.31 返回審稿意見(conditional accept)包括語言潤色 2024.06.09 提交r2&#xff0c;沒有使用愛思維爾的潤色 2024.06.10 with editor 2024.06.13 under review 2024.06.24 revise(折磨…
閱讀更多...
MFC之對話框--線寬/線型/顏色

MFC之對話框--線寬/線型/顏色

文章目錄 線寬輸入實現優化無法記錄上一次線粗問題 線寬滑動實現實現選擇線類型實現顏色選擇總結 線寬輸入實現 優化無法記錄上一次線粗問題 線寬滑動實現 實現選擇線類型 實現顏色選擇 總結 1。創建新窗口&#xff08;dialog)會創建一個新的類&#xff0c;在類中實現窗口中的…
閱讀更多...
vue中父子傳遞屬性值

vue中父子傳遞屬性值

1、父傳子屬性值 自定義圖庫組件 在add.vue中應用tuku組件并給默認值 效果 2、 子傳父&#xff0c;逆向賦值 add.vue和第一問中一樣 修改tuku組件&#xff0c;傳值給add.vue 3、多個傳遞 效果&#xff1a; 點擊兩個修改按鈕后 4、使用defineModel簡化父子傳值 其他代碼跟…
閱讀更多...
【postgresql】時間函數和操作符

【postgresql】時間函數和操作符

日期/時間操作符 加減操作符&#xff1a; 和 - 可以用于日期、時間、時間戳和時間間隔的加減操作。 SELECT 2024-01-01::date INTERVAL 1 day as "date"; ; -- 結果&#xff1a;2024-01-02SELECT 2024-01-01 12:00:00::timestamp - INTERVAL 2 hours as "…
閱讀更多...
概率論原理精解【2】

概率論原理精解【2】

文章目錄 笛卡爾積任意笛卡爾積投影映射概述詳解一一、定義二、性質三、應用四、結論 詳解二定義與性質應用與意義示例結論 參考文獻 笛卡爾積 任意笛卡爾積 { A t , t ∈ T } \{A_t,t \in T\} {At?,t∈T}是一個集合族&#xff0c;其中T為一個非空指標集&#xff0c;稱 t ∈…
閱讀更多...
CSS上下懸浮特效

CSS上下懸浮特效

要實現一個上下懸浮的特效&#xff0c;可以使用CSS的keyframes規則和動畫屬性。以下是一個簡單的示例&#xff1a; 代碼示例 /* 定義一個名為floating的動畫 */ keyframes floating {0% {transform: translateY(0); /* 初始位置 */}50% {transform: translateY(-4px); /* 向上…
閱讀更多...
M1000 4G藍牙網關：高速穩定，賦能物聯網新體驗

M1000 4G藍牙網關：高速穩定，賦能物聯網新體驗

桂花網M1000的4G移動網絡功能主要體現在以下幾個方面&#xff1a; 一、高速穩定的數據傳輸 高速率&#xff1a;M1000支持4G移動網絡&#xff0c;能夠實現高速的數據傳輸。根據4G網絡的技術標準&#xff0c;其理論上的最大下行速率可達到數百Mbps&#xff08;如TD-LTE在20MHz帶…
閱讀更多...
KALI使用MSF攻擊安卓設備

KALI使用MSF攻擊安卓設備

這期是kali使用MSF進行安卓滲透的保姆級別教程&#xff0c;話不多說&#xff0c;直接開始。 準備材料&#xff1a; 1.裝有kali的實體機或虛擬機&#xff08;這里用實體機進行演示&#xff09; 2.一臺安卓10.0以下的手機 打開kali&#xff0c;先用ifconfig查看自己的kali IP地址…
閱讀更多...
Python3極簡教程(一小時學完)下

Python3極簡教程(一小時學完)下

目錄 PEP8 代碼風格指南 知識點 介紹 愚蠢的一致性就像沒腦子的妖怪 代碼排版 縮進 制表符還是空格 每行最大長度 空行 源文件編碼 導入包 字符串引號 表達式和語句中的空格 不能忍受的情況 其他建議 注釋 塊注釋 行內注釋 文檔字符串 版本注記 命名約定 …
閱讀更多...
[BJDCTF2020]EasySearch1

[BJDCTF2020]EasySearch1

知識點&#xff1a; 1.swp泄露 2.md5碰撞 3.PHP代碼審計 4.SSI代碼執行漏洞 // Apache SSI 遠程命令執行漏洞復現 看著像sql注入&#xff0c;不過注入無果&#xff0c;掃一下目錄試試~ 發現是swp泄露. SWP文件泄露漏洞是指在使用 Vim編輯器 編輯一個文件時&#xff0c;Vim會在…
閱讀更多...
codeforce 954 div3 G2題

codeforce 954 div3 G2題

思路&#xff1a; 質因子分解可以順著分解&#xff0c;也可以逆著分解 即找到每一個數字的倍數&#xff0c;再找到每一個數字的因數 const int N 5e510; vector<int> ff[N]; vector<int> f[N]; vector<int> g[N];void solve(){int n;cin>>n;vector&l…
閱讀更多...
OpenCV漫水填充函數floodFill函數的使用

OpenCV漫水填充函數floodFill函數的使用

操作系統&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 編程語言&#xff1a;C11 功能描述 ffloodFill函數是OpenCV庫中用于圖像處理的一個功能&#xff0c;它用于填充與種子點顏色相近的連通區域。這個函數在很多場景下都非常有用&#x…
閱讀更多...
MUR2060CTR-ASEMI無人機專用MUR2060CTR

MUR2060CTR-ASEMI無人機專用MUR2060CTR

編輯&#xff1a;ll MUR2060CTR-ASEMI無人機專用MUR2060CTR 型號&#xff1a;MUR2060CTR 品牌&#xff1a;ASEMI 封裝&#xff1a;TO-220 批號&#xff1a;最新 最大平均正向電流&#xff08;IF&#xff09;&#xff1a;20A 最大循環峰值反向電壓&#xff08;VRRM&#…
閱讀更多...
【數據結構】線性表----隊列詳解

【數據結構】線性表----隊列詳解

1. 隊列的基本概念 話不多說&#xff0c;直接開始&#xff01; 隊列是一種線性數據結構&#xff0c;同棧類似但又不同&#xff0c;遵循先進先出&#xff08;FIFO, First In First Out&#xff09;的原則。換句話說&#xff0c;最先進入隊列的元素會最先被移除。這樣的特點使得…
閱讀更多...
小白學python(第七天)

小白學python(第七天)

哈哈&#xff0c;這個系列的文章也有一段時間沒更新&#xff0c;主要是最近在忙c嘎嘎&#xff0c;不過沒事接下來會優先更python啦&#xff0c;那么我們先進入正題吧 函數的定義及調用 函數定義 格式&#xff1a;def 函數名&#xff08;形參列表&#xff09;&#xff1a; 語…
閱讀更多...
QTabWidget、QListWidget、QStackedWidget

QTabWidget、QListWidget、QStackedWidget

The QTabWidget class provides a stack of tabbed widgets. More... The QListWidget class provides an item-based list widget. More... QStringList strlist;strlist<<"系統"<<"外觀"<<"截圖"<<"貼圖"…
閱讀更多...
.NET MAUI開源架構_4..NET MAUI 應用支持的平臺

.NET MAUI開源架構_4..NET MAUI 應用支持的平臺

可以針對以下平臺編寫 .NET Multi-platform App UI (.NET MAUI) 應用&#xff1a; 需要 Android 5.0 (API 21) 或更高版本。需要 iOS 11 或更高版本使用 Mac Catalyst 的 macOS 11 或更高版本。Windows 11 和 Windows 10 版本 1809 或更高版本&#xff0c;使用 Windows UI 庫 …
閱讀更多...
最新文章

Copyright @ 2022~2023