css学习5

3D转换

transform rotateX() X轴方向向里旋转指定度数

transform rotateY() Y轴方向向里旋转指定度数

例：div{transform:rotateX(120deg);}向里旋转120度

 div{transform:rotateY(120deg);}

 

过渡效果

transtition 

例:div{transition:width 2s;}div:hover{width:300px}当鼠标光标移动到该元素时，它逐渐改变它原有样式(变长）

多项过渡

例 div {
width: 100px;
height: 100px;
background: red;
transition: width 2s, height 2s, transform 2s;
}

div:hover {
width: 200px;
height: 200px;
transform: rotate(180deg);
}

 

再例

div{
  width: 200px;
  height: 200px;
  background-color: #f00;
  transition: all 2s;
}

div:hover{
  background-color: #00f;
  transform: translateX(500px) translateY(500px) scale(0.8) rotate(360deg);
}