爱站程序员基地注意transform转换要实现多个效果时,不能分开写,否则后面的transform效果会覆盖前面的transform效果,要达到多个效果时,需要使用混合写法,可参考下面两种混合写法
效果如图:
<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><title>2D动画的转换</title><style>html {height: 100%;}body {height: 100%;margin: 0;display: flex;justify-content: center;align-items: center;}body>section {width: 500px;height: 500px;background-color: saddlebrown;}body>section>section {width: 500px;height: 500px;background-color: darkkhaki;/*设置容器透明度*/opacity: 0.8;/*通过2d转换transform（平移、缩放、旋转、倾斜）将当前的容器进行改变*//*1平移 translate() 参数分别为：x轴的偏移量、y轴的偏移量*//*如果只写一个值，就代表x轴方向的平移量*//*将容器做平移，朝着x轴正方向平移50px，朝着y轴正方向平移50px*/transform: translate(50px, 50px);/*往反方向做平移*/transform: translate(-100px, -100px);/*从原点出发，朝着x轴的正方向平移100px*/transform: translateX(100px);/*2 缩放 scale() 参数分别为：x轴方向的缩放比例，y轴方向的缩放比例，比例是参照容器原宽、原高，缩放的参照点是容器的中心点*//*参数如果只写一个，代表x轴方向和y轴方向缩放比例一样*//*参数值域范围：>=0 1代表容器原始大小1：1的效果*//*将容器朝着x轴y轴缩小0.5倍，缩小一半*/transform: scale(0.5, 0.5);/*将容器朝着x轴y轴放大1.3倍，比原来大些*/transform: scale(1.3, 1.3);/*可以只做一个方向上的缩小或放大*/transform: scaleX(0.6);/*3 旋转 rotate() 参数为旋转的度数，需要附上单位：deg度*//*朝着顺时针方向旋转45度*/transform: rotate(45deg);/*朝着逆时针方向旋转20度*/transform: rotate(-20deg);/*朝着x轴正方向做30度旋转 会发现y轴上的平面高度变短，但实际没变*/transform: rotateX(30deg);/*4 倾斜 skew() 参数分别为：x轴的倾斜度，y轴的倾斜的度*//*参数如果只写一个值 就代表x轴的倾斜度*/transform: skew(50deg, 50deg);/*也可以朝着某个方向做倾斜*/transform: skewX(-10deg);/*混合写法 matrix() *//*6参数分别为：x轴的缩放（默认1）、y轴倾斜（默认0）、x轴倾斜（默认0）、y轴的缩放（默认1）、x的平移（默认0）、y轴的平移（默认0）*/transform: matrix(1.2, 0, 0.1, 1.2, 50, 50);/*可以同时写多个效果*//*容器朝着x轴平移100px 然后缩小0.5倍*/transform: translateX(100px) scale(0.5);transform: translate(50px) scale(1.2) rotate(30deg);}</style></head><body><section><section><section></section></section></section></body></html>
如果文章对你有帮助,麻烦点个赞,谢谢~
