css3形状2d转换和3d转换转换 好玩的示例

分2d转换和3d转换。有什么好玩的，下面列举几个！文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/193.html

4-1.语法

transform:适用于2D或3D转换的元素
transform-origin：转换元素的位置（围绕那个点进行转换）。默认(x,y,z)：(50%,50%,0)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/193.html

4-2.实例

transform:rotate(30deg);文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/193.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/193.html

transform:translate(30px,30px);文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/193.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/193.html

transform:scale(.8);文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/193.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/193.html

transform: skew(10deg,10deg);文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/193.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/193.html

transform:rotateX(180deg);文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/193.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/193.html

transform:rotateY(180deg);文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/193.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/193.html

transform:rotate3d(10,10,10,90deg);文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/193.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/zhizuo/193.html