Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/sql-server-2005/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
使用css3放大图像(基于wabkit的问题)_Css_Webkit_Zooming_Transitions - Fatal编程技术网

使用css3放大图像(基于wabkit的问题)

使用css3放大图像(基于wabkit的问题),css,webkit,zooming,transitions,Css,Webkit,Zooming,Transitions,下面的代码有一个问题。我想用css创建类似缩放的效果。我在某些事件上使用jquery添加了zoomIn或zoomOut类,这现在并不重要 问题在于,在Chrome和Safari(基于webkit)中,放大和缩小从0开始。例如,在firefox中,转换从当前图像高度开始,在本例中扩展到1160px。然而,webkit浏览器似乎处理不同的事情,并开始从0到1160px的转换 我没有聪明的方法来解决这个问题,所以请帮忙 干杯 这些图像还有一类“完整” .full {display:bloc

下面的代码有一个问题。我想用css创建类似缩放的效果。我在某些事件上使用jquery添加了zoomIn或zoomOut类,这现在并不重要

问题在于,在Chrome和Safari(基于webkit)中,放大和缩小从0开始。例如,在firefox中,转换从当前图像高度开始,在本例中扩展到1160px。然而,webkit浏览器似乎处理不同的事情,并开始从0到1160px的转换

我没有聪明的方法来解决这个问题,所以请帮忙

干杯

这些图像还有一类“完整”

.full       {display:block;position:absolute;width:100%;top:0;left:0;}

.zoomIn{ 
 top:0;left:0;
 box-sizing: border-box;
  -webkit-transition: all 0.2s ease-in; 
  -o-transition: all 0.2s ease-in; 
  -moz-transition: all 0.2s ease-in; 
  transition: all 0.2s ease-in; 
  height: 1160px !important;
  left: 50%;
  margin-left: -960px !important;
  margin-top: -670px !important;
  top: 50%;
  width: 1920px;
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -o-transform: scale(1.2);
  transform: scale(1.2);
  -ms-transform: scale(1.2);

  }

.zoomOut { 
  -webkit-transition: all 0.2s ease-in; 
   -o-transition: all 0.2s ease-in;  
   transition: all 0.2s ease-in; 
   -moz-transition: all 0.2s ease-in; 
   -moz-transform: scale(1);
   margin-left: 0 ;margin-top: 0;
   -webkit-transform: scale(1);
   -o-transform: scale(1);
   transform: scale(1);
   -ms-transform: scale(1);

  }