012旋转

最新推荐文章于 2022-11-26 09:36:13 发布

陀陀吖

最新推荐文章于 2022-11-26 09:36:13 发布

阅读量98

点赞数

分类专栏： h5c3

本文链接：https://blog.csdn.net/weixin_40422393/article/details/89287813

版权

h5c3 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>旋转</title>
	<style>

		/*transform用法总结：
			1、位置移动：transform: translate(100px,100px);
			2、让盒子居中：position: absolute;
							top: 50%;
							left: 50%;
							transform: translate(-50%,-50%);
			3、缩放：transform: scale(0.8,1); 
			4、旋转：transform: rotate(45deg);
			5、让盒子倾斜：transform:skew(45deg);    倾斜45度
			6、让盒子围绕哪一位置旋转：transform-origin:right top;   旋转中心点为右下角   也可以设置像素值* */


		div{
			width: 200px;
			height: 200px;
			margin: 500px auto;
			position: relative;
			background-color: yellow;

		}
		span{
			display: block;
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
			transform-origin:top right;
			transition: all 2s;
		}
		
		div:hover span:first-child{
			background-color: red;
			transform: rotate(60deg);
		}
		div:hover span:nth-child(2){
			background-color: pink;
			transform: rotate(120deg);
		}
		div:hover span:nth-child(3){
			background-color: purple;
			transform: rotate(180deg);
		}
		div:hover span:nth-child(4){
			background-color: green;
			transform: rotate(240deg);
		}
		div:hover span:nth-child(5){
			background-color: blue;
			transform: rotate(300deg);
		}
		div:hover span:last-child{
			background-color: yellow;
			transform: rotate(360deg);
		}

	</style>
</head>
<body>
	<div>
		<span></span>
		<span></span>
		<span></span>
		<span></span>
		<span></span>
		<span></span>
	</div>
</body>
</html>

在这里插入图片描述

陀陀吖

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
012旋转

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>旋转</title> <style> /*transform用法总结： 1、位置移动：transform: translate(100px,100px); ...
复制链接

扫一扫

专栏目录