2D 转换 3D 转换
转换有下列属性：
- transform: 将 2D 或 3D 转换应用到元素上去
- transform-origin：可以改变被转换元素的位置
transform-origin:x-axis y-axis z-axis;
/*
x-axis:定义视图在 X 轴的位置，left | center | right | length | %
y-axis:定义视图在 Y 轴的位置，top | center | bottom | length | %
z-axis:定义视图在 Z 轴的位置，length
*/
.div1{
float: left;
width: 200px;
height: 200px;
margin: 100px;
border: 2px solid;
text-align: center;
}
.div1 div{
width: 200px;
height: 200px;
background: lightblue;
transform: rotate(45deg);
}
.transform-origin div{
transform-origin: 10% 10%;
}
<div class="div1">
<div>变换基点在默认位置</div>
</div>
<div class="div1 transform-origin">
<div>变换基点在 10% 10% 位置</div>
</div>
- transform-style：规定被嵌套元素如何在 3D 空间中显示
transform-style: flat | preserved-3d;
/*
flat：子元素将不保留 3D 位置
preserved-3d：子元素将保留 3D 位置
在实现一些 3D 效果的时候，一般都要声明为 preserved-3d
*/
.div1{
float: left;
width: 200px;
height: 200px;
border: 1px solid #bbb;
margin: 100px;
/* 在父元素中设置transform-style: preserve-3d; */
transform-style: preserve-3d;
transform:perspective(2000px);
}
.div1 div{
width: 200px;
height: 200px;
background: lightblue;
transform: rotateX(50deg);
}
.div2{
float: left;
width: 200px;
height: 200px;
border: 1px solid #bbb;
margin: 100px;
/* 在父元素中设置transform-style: flat; */
transform-style: flat;
transform:perspective(600px);
}
.div2 div{
width: 200px;
height: 200px;
background: lightgreen;
transform: rotateX(60deg);
}
<div class="div1">
<div></div>
</div>
<div class="div2">
<div></div>
</div>
可以看到，div1 和 div2 除了 transform-style 属性之外，其它完全相同，一个保留了 3d 效果，一个未保留 3d 效果。
- perspective：规定 3D 元素的透视效果，与 perspective-origin 结合使用，可以改变 3D 元素的底部位置,在实现一些 3D 效果，这一项是必不可少的。
perspective: number | none;
/*
number：单位 px，元素距离视图的距离
none：默认值，0，无透视
*/
.div1{
width: 200px;
height: 200px;
margin: 50px;
border:1px solid #bbb;
}
.div1 div{
width: 200px;
height: 200px;
background: lightgreen;
transform: perspective(600px) rotateY(45deg);
}
<div class="div1">
<div></div>
</div>
- perspective-origin：规定 3D 元素的底部位置
perspective-origin: x-axis y-axis;
/*
x-axis:定义该视图在 X 轴上的位置。默认为 50%。left|center|right|length|%
y-axis:定义该视图在 Y 轴上的位置。默认为 50%。top|center|bottom|length|%
将透视聚集点改变到其他位置。
*/
- backface-visibility：定义元素在不面对屏幕时是否可见
backface-visibility:visible|hidden;
/*
visible：背面可见
hidden：背面不可见
*/
div{
float: left;
width: 200px;
height: 200px;
background: lightgreen;
transform:rotateY(180deg);
/* 将 div 元素都翻转 180deg，翻转到背面 */
}
.div1{
backface-visibility: hidden;
}
.div2{
backface-visibility: visible;
}
<div class="div1">div1 backface-visibility: hidden;</div>
<div class="div2">div2 backface-visibility: visible;</div>
可以看到，两个 div 块在翻转后都是背面朝向我们，当我们设置 div1 的 backface-visibility: hidden 时，div1 就不可见了，只有 div2 是可见的。
2D 转换
2D 转换有以下几种常用方法：
- translate(x,y) ：根据原始位置的 x 、y 轴位置，分别偏离 x 、y 的距离。
- rotate(angle) ：根据给定的 angle 大小，顺时针旋转，如果 angle 为负，则逆时针旋转。
- scale(x,y) ：根据 x 、y 的值，对应的放大宽度和高度。
- skew(angle,angle) ：根据给定的两个角度，分别在水平方向和垂直方向倾斜，第二个角度默认为 0 。
- matrix() ：matrix 变换涉及到了线性代数的知识，在此不作讲述。
.div1{
float:left;
margin: 50px;
width: 200px;
height: 200px;
background-color: lightgreen;
opacity: .5;
transition: 1s;
}
.div1:hover{
transform: translate(30px,40px);
opacity:1;
}
.div2{
float: left;
margin: 50px;
width: 200px;
height: 200px;
background-color: cyan;
opacity: .5;
transition: 1s ease-in;
}
.div2:hover{
opacity: 1;
transform: rotate(180deg);
}
.div3{
float: left;
margin: 50px;
height: 200px;
width: 200px;
background-color: orange;
opacity: .5;
transition: 1s;
}
.div3:hover{
transform: skew(20deg,30deg);
opacity: 1;
}
.div4{
float: left;
margin: 50px;
height: 200px;
width: 200px;
background-color: orange;
opacity: .5;
transition: 1s;
}
.div4:hover{
transform: scale(1.3,1);
opacity: 1;
}
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
<div class="div4">div4</div>
3D 转换
3D 转换语法与 2D 转换语法较为类似
- translate3d(x,y,z):定义 3D 转化，给出三个值，分别应用于三个坐标轴上
- translateX(x):定义 3D 转化，仅用于 X 轴
- translateY(y):定义 3D 转化，仅用于 Y 轴
- translateZ(z):定义 3D 转化，仅用于 Z 轴
- scale3d(x,y,z):定义 3D 缩放转换
- scaleX(x):定义 3D 缩放转换，仅用于 X 轴
- scaleY(y):定义 3D 缩放转换，仅用于 Y 轴
- scaleZ(z):定义 3D 缩放转换，仅用于 Z 轴
- rotate3d(x,y,z,angle):定义 3D 旋转
- rotateX(angle):定义沿 X 轴的 3D 旋转
- rotateY(angle):定义沿 Y 轴的 3D 旋转
- rotateZ(angle):定义沿 Z 轴的 3D 旋转
- perspective:定义 3D 转换元素的透视视图
.div1{
float: left;
margin:50px;
width: 200px;
height: 200px;
background-color: lightgreen;
opacity: 0.5;
transition:1s;
}
.div1:hover{
/*X 轴旋转*/
transform: rotateX(180deg);
opacity: 1;
}
.div2{
float: left;
margin:50px;
width: 200px;
height: 200px;
background-color: cyan;
opacity: 0.5;
transition:1s;
}
.div2:hover{
/*Y 轴伸缩*/
transform: scaleY(1.5);
opacity: 1;
}
.div3{
float: left;
margin:50px;
width: 200px;
height: 200px;
background-color: orange;
opacity: 0.5;
transition:1s;
}
.div3:hover{
/*X 轴移动*/
transform: translateX(50%);
opacity: 1;
}
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
动画
动画是使元素从一种样式逐渐变化为另一种样式的效果。在 CSS3 中 ，我们可以创建动画，取代以往的网页动画图象。
@keyframes
在 CSS3 标准下，我们使用 @keyframes 规则来创建动画。我们无需将动画的每一帧都描绘出来，只需要给出变化的关键帧，然后给出变化时间，其余的等待它自动计算完成就可以了。 @keyframes 里描述了动画的关键帧的相关属性，语法如下：
@keyframes 动画名称{
0%{
/*css code 描述关键帧属性*/
}
25%{
/*css code 描述关键帧属性*/
}
50%{
/*css code 描述关键帧属性*/
}
75%{
/*css code 描述关键帧属性*/
}
100%{
/*css code 描述关键帧属性*/
}
}
动画创建完成后，我们使用 animation 属性将动画绑定到对应的元素上去，并给出运行时间，就完成了一个简单的动画。
CSS3 动画还有很多有趣的属性：
- animation:动画属性的简写属性，除了 animation-play-state 属性。
- animaiton-name：规定 @keyframes 动画的名称。
- animation-duration：规定动画一个周期的时间，默认为 0。
- animaiton-timing-function：规定动画的速度曲线。默认为 ease。
- animaiton-delay：规定动画的播放延迟时间。
- animaiton-iteration-count：规定动画播放次数，默认为 1。取值为 infinite 时，动画被无限次播放。
- animation-direction：规定动画是否在下一周期逆向播放，默认为 normal。取值为 normal 时，动画正常播放，取值为 alternate 时，动画轮流反向播放。
- animation-play-state：规定动画是否正在运行或暂停，默认为 running；暂停时为 paused。
- animation-fill-mode：规定动画在播放之前或之后，其动画效果是否可见。取值为 none 时，不改变默认行为；取值为 forwards 时，在动画完成后，保持最后一个属性；取值为 backwards 时，在动画开始之前应用开始属性值；取值为 both 时，向前向后的模式都将被启用。
@keyframes myfirstcartoon{
0%{
background-color: lightgreen;
}
25%{
background-color: blue;
}
50%{
background-color: orange;
}
75%{
background-color: red;
}
100%{
background-color: yellow;
}
}
/* body{
animation: myfirstcartoon 5s;
} */
body{
animation: myfirstcartoon 1s ease-in-out 1s infinite alternate running;
/*上述值分别对应了：name duration timing-function delay iteration-count direction play-state*/
}
注：创建好的动画需要使用 animation 绑定到一个选择器上，否则动画不会运行；并且，需要给出运行时间，因为时间默认值是 0s ，如果不给出时间，动画将同样不会运行。
