html图片沿y轴转换,html-使用CSS水平翻转/垂直翻转/镜像图像

2024-05-29 02:53:14

我试图翻转图像以显示4种方式：原始(无变化)，水平翻转，垂直翻转，水平+垂直翻转。

为了做到这一点，我在下面做，除了水平+垂直翻转之外，它还可以正常工作，你知道为什么它不起作用吗？

香港专业教育学院的JS提琴在这里的问题：[https://jsfiddle.net/7vg2tn83/]

.img-hor {

-moz-transform: scaleX(-1);

-o-transform: scaleX(-1);

-webkit-transform: scaleX(-1);

transform: scaleX(-1);

filter: FlipH;

-ms-filter: "FlipH";

}

.img-vert {

-moz-transform: scaleY(-1);

-o-transform: scaleY(-1);

-webkit-transform: scaleY(-1);

transform: scaleY(-1);

filter: FlipV;

-ms-filter: "FlipV";

}

.img-hor-vert {

-moz-transform: scaleX(-1);

-o-transform: scaleX(-1);

-webkit-transform: scaleX(-1);

transform: scaleX(-1);

filter: FlipH;

-ms-filter: "FlipH";

-moz-transform: scaleY(-1);

-o-transform: scaleY(-1);

-webkit-transform: scaleY(-1);

transform: scaleY(-1);

filter: FlipV;

-ms-filter: "FlipV";

}

html图片沿y轴转换,html-使用CSS水平翻转/垂直翻转/镜像图像相关推荐

css+y轴平移,如何使用css translate实现平移？
我试图在视口上实现平移,当鼠标在容器上拖动时,其内部的元素应该移动问题是每次我开始将元素重置拖动到其第一个位置时. 此外,元素内部继承的事件不应该发生,因为点击时偏移量发生了变化.如何使用css tr ...
html左浮动不管用图片往下放,html - 如何在HTML / CSS中水平对齐图像（浮动和显示内联块不起作用） - 堆栈内存溢出...
我有一个水平排列的图像库,但是后来我做到了,以便当您将鼠标悬停在图像上时,图像上会覆盖文字,现在我以前没有什么东西可以用来使它们水平排列. 我尝试在所有选择器上使用左浮点数(同样使用display i ...
html中如何让图片斜显示,如何在偏斜层(CSS)中扭曲背景图像？
我正在尝试显示像这样的个人资料照片/ – /(斜线表示使用skewX的斜线,连字符表示水平对齐的背景图像). 问题是这段代码也会扭曲背景图像: .photo { transform: skewX(35 ...
x轴z轴代表的方向图片_游戏中到底是Z轴朝上还是Y轴朝上？
本文转自我的公众号--游戏开发那些事在谈到游戏世界中的坐标轴时,我们经常会看到这样的争论. "游戏中Y轴是向上的好么?这你都不知道?" "不对,空间直角坐标系不就是Z轴 ...
Latex中插入用origin绘画的两条坐标轴，双x轴或者双y轴拥有不同刻度的图片
先上效果图,如果所示,上面x轴的刻度从20-30,下面x轴的刻度从0-6,这样就达到了上下两条x轴显示不同刻度的目的. 下面我们说一下怎么做到的,其实比较简单,通过添加一层图层,就可以做到了,也就是说 ...
R语言作业：1.mpg数据的cty（城市燃油效率）和hwy（高速公路燃油效率）之间有什么关系？请制作x轴是cty，y轴是hwy的算点图。请把图片储存起来上传
这是一份R语言作业: 1.mpg数据的cty(城市燃油效率)和hwy(高速公路燃油效率)之间有什么关系? 请制作x轴是cty,y轴是hwy的算点图. 请把图片储存起来上传了解哪些公司生产的" ...
曲线绕x轴旋转曲面方程_绕x轴旋转（微积分旋转体绕y轴旋转体积~我看不懂图片上的公式~...）...
关于空间曲线(参数方程)绕x轴旋转得到的曲面方程绕哪个轴旋转,那个坐标不变,另一个的平方变,坐标的平方和绕轴旋转. 由一些在指定的集的数,称为参数或自变量,以决定因变量的结果.例如在运动学,参数通常 ...
x轴z轴代表的方向图片_x y z三个轴的方向 x轴、y轴和z轴分别代表的是什么？
1, x轴.y轴和z轴分别代表的是什么? 空间任意选定一点O,过点O作三条互相垂直的数轴Ox,Oy,Oz,它们都以O为原点且具有相同的长度单位.这三条轴分别称作x轴(横轴),y轴(纵轴),z轴(竖轴) ...
Echarts Y轴单位自动转换
用Echarts展示交易额趋势时,发现过百万的数字显示的0太难数了,想实现Y轴的单位可以根据金额的大小自动选择单位,在网络上找了好久,做个笔记. Y轴 JS代码如下: yAxis: [{type: ' ...

最新文章

热门文章