虽然2D3D变形用的不是很多,但今天既然学到了还是要记一下,笔记流博客,不喜勿喷
transform:变形样式
rotate表示旋转变形,正值顺时针,单位为deg
transform-origin,设置变形原点,默认为50% 50%
translate:平移变形,两个参数分别是横向偏移量和纵向偏移量
scale:缩放变形,两个参数分别是横向方大倍数和纵向放大倍数
多种变形效果可以共同使用但需要注意的是有先后顺序
transform: translate(100px,00px) rotate(45deg);
此段代码是先平移,再旋转,和先旋转再平移是不一样的,因为旋转之后X,Y轴也会跟着旋转,具体效果自测
注意:在transform里使用定位时,各个方向的值如果是百分号,是相对于自身的百分比(一般情况是相对于父标签的百分比)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#d1 {
width: 100px;
height: 100px;
background-color: red;
}
#d1:hover {
/* transform,变形样式。 */
/* rotate表示旋转变形,正值顺时针 */
transform: rotate(30deg);
/* transform-origin,设置变形原点,默认为50% 50% */
transform-origin: 100% 100%;
}
#d2 {
width: 100px;
height: 100px;
background-color: blue;
}
#d2:hover {
/* translate:平移变形,两个参数分别是横向偏移量和纵向偏移量 */
transform: translate(50px, 30px);
}
#d3 {
width: 100px;
height: 100px;
background-color: greenyellow;
}
#d3:hover {
transform-origin: 0 0;
/* scale:缩放变形,两个参数分别是横向方大倍数和纵向放大倍数 */
transform: scale(0.5, 0.5)
}
/* 多种变形效果可以共同使用 */
#d4 {
width: 100px;
height: 100px;
background-color: rebeccapurple;
transform: translate(100px,00px) rotate(45deg) scale(0.5,0.5);
}
#d5{
width: 400px;
height: 400px;
border: 1px solid #000;
position: relative;
}
#d6{
width: 100px;
height: 100px;
background-color: firebrick;
position: absolute;
/* 设置宽度,高度,left等样式时百分比相对于父元素 */
left: 50%;
top: 50%;
/* 设置变形时,百分比相对于自身 */
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div id="d1"></div>
<br>
<div id="d2"></div>
<br>
<div id="d3"></div>
<br>
<div id="d4"></div>
<br>
<div id="d5">
<div id="d6"></div>
</div>
</body>
</html>