CSS3 2D转换
关键字：transform
- 移动：沿着x,y轴移动，不会影响盒子的位置，对行内元素没有效果
div {
width: 100px;
height: 100px;
background-color: rebeccapurple;
transform: translate(100px,100px);
transform: translateX(100px);
transform: translateY(100px);
}
- 旋转 rotate
div {
width: 200px;
height: 200px;
background-color: aqua;
/* transform: rotate(30deg); */
transition: all 1s;
}
div:hover {
transform: rotate(360deg);
}
- 2d转换中心点 transform-origin
div {
width: 200px;
height: 200px;
border: 1px solid #000;
transition: all 1s;
transform-origin: left bottom;
transform-origin: 300px 300px;
}
div:hover {
transform: rotate(220deg)
}
- 缩放 scale：可以设置转换中心点，不影响其他盒子
p {
width: 200px;
height: 200px;
background-color: red;
}
p:hover {
transform: scale(2,1);
transform: scaleX(3);
transform: scale(2);
transform: scale(0.5);
}
- 转换综合写法: 以空格隔开，顺序会影响效果，最好位移在前
li:hover {
transform: translate(0px,10px) rotate(90deg) scale(1.2);
}
CSS3 动画
关键字： animation
- 用keyframes定义动画并使用
@keyframes move {
0%{
transform: translateX(0px);
}
100%{
transform: translateX(1000px);
}
}
div {
width: 200px;
height: 200px;
background-color: red;
animation: move 2s ;
}
动画相关属性：
- 使用多个状态和属性
@keyframes move {
from {
transform: translateX(0px);
}
50% {
transform: translate(500px, 200px);
}
60% {
transform: translateX(1000px);
}
to {
transform: translateX(0);
}
}
div {
width: 200px;
height: 200px;
background-color: red;
animation: move 2s ;
animation-iteration-count: infinite;
animation-direction: alternate;
/* animation-fill-mode: forwards; */
}
div:hover {
animation-play-state: paused;
}
CSS3 3D转换
-
透视 perspective ：写到被观察元素的父盒子上；
-
移动： translate3d:
body {
perspective: 105px;
}
div {
width: 100px;
height: 100px;
background-color: #663399;
transform: translate3d(100px,100px,10px);
}
- 旋转 rotate3d:
body {
perspective: 300px;
}
img {
display: block;
margin: 20px 200px;
width: 200px;
transition: all 2s;
}
img:hover {
transform: rotateX(360deg);
transform: rotateY(180deg);
transform: rotateZ(90deg) ;
transform: rotate3d(1,1,0,270deg);
}
- 3d呈现 transform-style:
body {
perspective: 300px;
}
box {
position: relative;
width: 200px;
height: 200px;
margin: 0 auto;
transform-style: preserve-3d;
transition: all 2s;
}
.box:hover {
transform: rotateY(180deg);
}
.box div {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
background-color: aqua;
}
.box div:last-child {
background-color: blue;
transform: rotateX(60deg);
}