发表于： 2019-10-16 23:05:52
1 859
CSS3 转换
CSS3 2D 转换
2D变换方法：
translate()
rotate()
scale()
skew()
matrix()
<style>
div
{
width:200px;
height:100px;
background-color:yellow;
/* Rotate div */
transform:rotate(30deg);
-ms-transform:rotate(30deg); /* IE 9 */
-webkit-transform:rotate(30deg); /* Safari and Chrome */
}
声明的盒子，宽高，背景色及重复不同内核下代码
目标代码： transform:rotate(30deg);中文含义：变换:旋转(30度)
根据显示效果，为对角线交点为圆心，顺时针旋转30度
ps：需要注意，左边和上面有部分被视口覆盖，在自己做时，需要考虑层级关系，覆盖问题，还有高度改变，
引起整体布局的改变的问题
</style>
</head>
<body>
<div>Hello</div>
</body>
</html>
translate() 方法
ranslate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。
<style>
div
{
width:100px;
height:75px;
background-color:red;
border:1px solid black;
}
div#div2
{
transform:translate(50px,100px);
/*translate值（50px，100px）是从左边元素移动50个像素，并从顶部移动100像素。*/
-ms-transform:translate(50px,100px); /* IE 9 */
-webkit-transform:translate(50px,100px); /* Safari and Chrome */
}
</style>
</head>
<body>
<div>Hello. This is a DIV element.</div>
<div id="div2">Hello. This is a DIV element.</div>
</body>
遇到问题：div#div2是什么？
答：div#div2是指id为div2的div标签，也就是指这个
<div id="div2">
</div>
这是一个 DIV 元素。
其实由于ID具有唯一性，因此可以简化为
#div2
也就是id为div2的标签
扩展：为什么不直接#div2
一方面便于阅读，了解id为div2的元素的隶属关系，其次也是为了避免冲突！
在定义指定id元素样式时不是很明显，但是在定义指定class元素的样式的时候就显得比较重要。
例如简单的列表，主体左侧和右侧都有，为了避免样式重叠，就需要在选择器名称前加上上级（树）的前置限定。
class或id名称之间需要加空格 html标签后缀class或id名的时候是不需要加的，表示同级的归属关系！
例如#mainbody p.intro，表示id为mainbody下class名为intro的p元素
总结：
1.根据元素当前位置进行移动，类似绝对定位，
2.ransform:translate(Apx,Bpx);
A是相对于当前位置水平向右，B是垂直向下
并且，A或者B可以设置为0，但不能不设置，单独存在的A或B无效
3.可以设定负值，效果类似外边距
transform:translate(-20px,-10px);
显示如下：
返回列表
评论