css3 transform的旋转和位移制作太阳花

css3 transform

  • 实例展示
  • 知识点
    • [rotate 旋转](#rotate 旋转)
    • [translate 位移](#translate 位移)
    • [transform: translate(300px,200px) rotate(90deg)](#transform: translate(300px,200px) rotate(90deg))
  • 实例代码

实例展示

知识点

transform的两个属性

rotate 旋转

translate 位移

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

实例代码

javascript 复制代码
<!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>
相关推荐
晓13131 小时前
JavaScript加强篇——第七章 浏览器对象与存储要点
开发语言·javascript·ecmascript
海底火旺2 小时前
浏览器渲染全过程解析
前端·javascript·浏览器
前端付豪2 小时前
15、前端可配置化系统设计:从硬编码到可视化配置
前端·javascript·架构
aPurpleBerry2 小时前
hot100 hot75 栈、队列题目思路
javascript·算法
颜漠笑年2 小时前
可迭代对象≠数组,一起来揭开for...of背后隐藏的秘密吧
前端·javascript
脑袋大大的3 小时前
判断当前是否为钉钉环境
开发语言·前端·javascript·钉钉·企业应用开发
军军君013 小时前
基于Springboot+UniApp+Ai实现模拟面试小工具二:后端项目搭建
前端·javascript·spring boot·spring·微信小程序·前端框架·集成学习
江城开朗的豌豆5 小时前
退出登录后头像还在?这个缓存问题坑过多少前端!
前端·javascript·vue.js
江城开朗的豌豆5 小时前
Vue的'读心术':它怎么知道数据偷偷变了?
前端·javascript·vue.js
江城开朗的豌豆5 小时前
手把手教你造一个自己的v-model:原来双向绑定这么简单!
前端·javascript·vue.js