css-2D旋转
css - 2D旋转
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.xy {
position: relative;
width: 300px;
height: 300px;
border-top: 2px solid #000;
border-left: 2px solid #000;
margin: auto;
}
.xy::before {
content: attr(metapoint);
position: absolute;
top: -20px;
left: -20px;
color: red;
}
.one {
width: 200px;
height: 200px;
background-color: gray;
}
.one:hover::before {
content: "移动到这儿了";
display: block;
width: 200px;
height: 200px;
background-color: #999;
transform: translate(100px, 100px);
/*
transform: translate(x,y)
x --> 水平
y --> 垂直
不影响其他元素的位置
行内标签没有效果
*/
}
.two {
width: 150px;
height: 150px;
text-align: center;
background-color: gray;
}
.two:hover::before {
content: attr(data);
text-align: center;
display: block;
text-align: center;
width: 150px;
height: 150px;
background-color: #999;
line-height: 150px;
border-radius: 50%;
border: 5px solid pink;
/*顺时针旋转45度*/
transform: rotate(45deg);
/*transition: all 0.1s;*/
/*
transform: rotate(x,y)
*/
}
.three {
position: relative;
width: 249px;
height: 35px;
border: 1px solid gray;
}
.three::after {
content: "";
position: absolute;
top: 7px;
right: 15px;
width: 10px;
height: 10px;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
transform: rotate(45deg);
transition: all 0.2s;
}
.three:hover::after {
/*旋转的中心点位置*/
transform-origin: left bottom;
/*top: 15px;*/
transform: rotate(225deg);
}
div:nth-of-type(n+5) {
float: left;
margin: 5px;
height: 200px;
width: 200px;
background: #0000ff;
overflow: hidden;
}
div:nth-of-type(n+5):after {
content: "";
display: block;
height: 200px;
width: 200px;
background-color: green;
transition: all 0.5s;
transform: rotate(90deg);
transform-origin: left bottom;
}
div:nth-of-type(n+5):hover::after {
transform: rotate(0deg);
}
</style>
</head>
<body>
<h1>transform CSS3 颠覆性特征之一
<strong>位移</strong>
<strong>旋转</strong>
<strong>缩放</strong>
</h1>
<h2>2D 转化</h2>
<h3>二维坐标系</h3>
<div class="xy" metapoint="(0,0)">
</div>
<h3>位移 translate</h3>
<ul>
<li>1. postion</li>
<li>2. margin</li>
<li>3.translate</li>
</ul>
<div class="one">
原来盒子
</div>
<h3>旋转 rotate</h3>
<div class="two" data="旋转盒子">
原来盒子
</div>
<h3>制作三角形</h3>
<div class="three">
</div>
<h3>旋转盒子排列</h3>
<div></div>
<div></div>
<div></div>
</body>
</html>
