css3变形之旋转 transform:rotate

阅读更多
rotate(angle) 定义 2D 旋转,在参数中规定角度。
rotate3d(x,y,z,angle) 定义 3D 旋转。
rotateX(angle) 定义沿着 X 轴的 3D 旋转。
rotateY(angle) 定义沿着 Y 轴的 3D 旋转。
rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。

我不想旋转(^_^)

.wrapper {
  margin: 100px auto;
  width: 300px;
  height: 200px;
  border: 2px dotted blue;
}
.wrapper div{
  width: 300px;
  height: 200px;
  line-height: 200px;
  text-align: center;
  background: green;
  color: #fff;
  -webkit-transform: rotate(-20deg);
  -moz-transform: rotate(-20deg);
  transform:rotate(-20deg);
}
.wrapper span {
  display:block;
 -webkit-transform:rotate(20deg);
 -moz-transform: rotate(20deg);
  transform:rotate(20deg);
 }

css3变形之旋转 transform:rotate_第1张图片
  • css3变形之旋转 transform:rotate_第2张图片
  • 大小: 5.1 KB
  • 查看图片附件

你可能感兴趣的:(css3变形之旋转 transform:rotate)