先看效果图:
html代码部分:
<ol class="rules" start="3">
<li>平移属性:translate()、translateX()、translateY()</li>
<li>旋转属性:rotate()、rotateX()、rotateY()</li>
<li>缩放属性:scale()、scaleX()、scaleY()</li>
<li>倾斜属性:skew()、skewX()、skewY()</li>
</ol>
完整css代码部分:
.rules{
list-style:none;
counter-reset:ruleCount 2; //方便标注序号
width:500px;
margin:100px auto;
font-size:14px;
}
.rules li{
height:50px;
line-height:50px;
padding:0 10px;
counter-increment:ruleCount;
position:relative;
}
.rules li:before{
content:'&' counter(ruleCount);
position:absolute;
transform-origin:100% 100%;
width:50px;
box-sizing:border-box;
text-align:center;
transform:translate(-100%,-100%) rotate(-90deg);
background-color:#ddd;
font-weight:bold;
border:1px solid #777;
}
.rules li:nth-child(odd){
background-color:#666;
transform:skewX(15deg);
}
.rules li:nth-child(even){
background-color:#999;
transform:skewX(-15deg);
}
说明:
list-style:none;去掉列表的默认样式(去掉编号)。
counter-reset:ruleCount 2;告诉浏览器当前元素的计数器已重置为ruleCount(名字任意取即可),为了告诉计数器的初始值是多少。
counter-increment:ruleCount;递增列表的每一项,如:第一项对应的计数器值是3,那第二项就应该是4,以此类推。
content:'&' counter(ruleCount);给列表的每一项添加序号(序号前加了特殊字符&)。
position:relative;为了给序号设置定位,不占据页面的空间,所以给li设置一个相对定位。这样在伪类before中就可以给序号添加绝对定位。定位后序号默认就位于每一项的左上角。
transform-origin:100% 100%;给位于左上角的序号设置旋转的中心点为序号的右下角。
transform:translate(-100%,-100%) rotate(-90deg);让序号先向左和向上移动序号元素自身的宽高值大小,再逆时针旋转90度。
transform:skewX(15deg);让奇数项元素整体在X轴上偏移15度;(折叠效果的关键代码)
transform:skewX(-15deg);让奇数项元素整体在X轴上偏移-15度;(折叠效果的关键代码)
缩放功能:
<div class="scale-box">以上是在2D变换效果中能用到的一些属性。</div>
.scale-box{
text-align:center;
}
效果如下:
如果我们只对X轴进行缩放0.5(缩小一倍)看看是什么效果:
.scale-box{
transform:scaleX(0.5);
}
字体被拉长了,形如被挤压。
下面我们来添加X轴和Y轴同时进行缩放属性:
.scale-box{
transform:scale(2);
/** 等同于transform:scale(2,2) **/
/** 等同于transform:scaleX(2) scaleY(2) **/
}
效果如下:
字体整体都被放大了2倍。