转换

转换的效果是让某个元素改变形状，大小和位置

transform属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜

xxxxxxxxxx
transform: none|transform-functions;

translate方法

translate()方法，根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动

xxxxxxxxxx
<div class="box"></div>

xxxxxxxxxx
.box {
    width: 100px;
    height: 80px;
    background-color: rgba(255, 0, 0, .8);
    transform: translate(50px, 100px);
}

rotate方法

rotate()方法，在一个给定度数顺时针旋转的元素。负值是允许的，这样是元素逆时针旋转。

xxxxxxxxxx
<div class="box"></div>

xxxxxxxxxx
.box {
    width: 100px;
    height: 80px;
    background-color: rgba(255, 0, 0, .8);
    transform: rotate(30deg);
}

scale方法

scale()方法，该元素增加或减少的大小，取决于宽度（X轴）和高度（Y轴）的参数

xxxxxxxxxx
<div class="box"></div>

xxxxxxxxxx
.box {
    width: 100px;
    height: 80px;
    background-color: rgba(255, 0, 0, .8);
    transform: scale(2,3); 
}

缩放实现将Chrome默认12px缩小为6px

xxxxxxxxxx
<p>将字体缩小为6px</p>

xxxxxxxxxx
p{
    font-size: 12px;
    transform: scale(0.5);
}

skew方法

skew()包含两个参数值，分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0，参数为负表示向相反方向倾斜

xxxxxxxxxx
<div class="box"></div>

xxxxxxxxxx
.box {
    width: 100px;
    height: 80px;
    background-color: rgba(255, 0, 0, .8);
    transform: skew(30deg,20deg);
}

3D转换

CSS3 允许您使用 3D 转换来对元素进行格式化

1. rotateX()
2. rotateY()

rotateX方法

rotateX()方法，围绕其在一个给定度数X轴旋转的元素

xxxxxxxxxx
<div class="box">文本查看信息</div>

xxxxxxxxxx
.box {
    width: 100px;
    height: 80px;
    background-color: rgba(255, 0, 0, .8);
    transform: rotateX(120deg);
}

rotateY方法

rotateY()方法，围绕其在一个给定度数Y轴旋转的元素

xxxxxxxxxx
<div class="box">文本查看信息</div>

xxxxxxxxxx
.box {
    width: 100px;
    height: 80px;
    background-color: rgba(255, 0, 0, .8);
    transform: rotateY(120deg);
}

实现小米官网动画效果

xxxxxxxxxx
<div class="box"></div>

xxxxxxxxxx
.box {
    width: 200px;
    height: 250px;
    background-color: #8ac007;
    margin: 50px;
}
.box:hover{
    box-shadow: 0 15px 30px rgba(0,0,0,0.2);
    transform: translate3d(0,-2px,0);
}

实时效果反馈

1.下列哪个方法可以将字体缩小到6px：

A translate

B rotate

C scale

D skew

答案

1=>C