关于css3 transform scale3d的问题

问题是:transition的过渡效果显示不出来了,只能显示出开头和结尾的部分,中间的省略了:代码1如下

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style type="text/css">
        #div1{
            perspective:800px;
            perspective-origin:50% 50%;
            -webkit-transform-style: preserve-3d;

        }
        #div1:hover #div2{
            -webkit-transform:rotateX(90deg) scale3d(0,0,0);
        }
        #div2{
            width:200px;
            height:200px;
            -webkit-transform:rotateX(20deg);
            -webkit-transform-origin: bottom;
            background-color: red;
            -webkit-transition:all 1s;
        }
    </style>
</head>
<body>
    <div id="div1">
        <div id="div2">
        </div>
    </div>

</body>
</html>
在上面这个代码中,如果scale3d(0,0,0)改成scale3d(1,1,1),那么效果又是有的,很奇怪o(╯□╰)o
是不是有什么顺序的?测试过几个例子,发现只要和scale扯上关系 就很可能出现问题,而如果只有位移和旋转就不会。。。

代码2如下:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style type="text/css">
        #div1{
            perspective:800px;
            perspective-origin:50% 50%;
            -webkit-transform-style: preserve-3d;

        }
        #div1:hover #div2{
            -webkit-transform:rotateX(90deg) scale3d(0,0,0);
        }
        #div2{
            width:200px;
            height:200px;
            -webkit-transform:scale3d(1,1,1);
            -webkit-transform-origin: bottom;
            background-color: red;
            -webkit-transition:all 1s;
        }
    </style>
</head>
<body>
    <div id="div1">
        <div id="div2">
        </div>
    </div>

</body>
</html>

一样的问题,中间效果没有,但是如果把rotate在hover的时候去掉,或者在之前多加一个,那么效果又是有的。。。。。。
T T有人知道是为什么吗。。。。一直想不通。好纠结

0

2个回答

感觉这个问题要误解了。。。。。。。。。。。。。。。。。。。。

0

        #div1 {
            perspective: 800px;
            perspective-origin: 50% 50%;
            -webkit-transform-style: preserve-3d;
        }

            #div1:hover #div2 {
                -webkit-transform: rotateX(90deg) scale3d(0,0,0);
            }

        #div2 {
            width: 200px;
            height: 200px;
            -webkit-transform: rotateX(20deg) scale3d(1,1,1);
            -webkit-transform-origin: bottom;
            background-color: red;
            -webkit-transition: all 1s;
        }
0
creasher
冕妄 加上scale3d我知道,我想知道是为什么,如果之前是rotate和translate那么只写rotate是可以的。
大约 3 年之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
关于CSS3 transform:matrix()牛角尖?
transform:scale(sx,sy) >>> transform:matrix(sx,0,0,sy,0,0)rnrntransform:translate(tx,ty) >>> transform:matrix(1,0,0,1,tx,ty)rnrntransform:skew(θx,θy) >>> transform:matrix(1,tan(θy),tan(θx),1,0,0)rnrntransform:rotate(θ) >>> transform:matrix(cosθ,sinθ,-sinθ,cosθ,0,0)rnrn既然transform都可以使用matrix(a,b,c,d,e,f)运算rn而运算后: rnx’=ax+cy+erny’=bx+dy+frnrn那么:rntranslate: rnx'= x+tx, x' 表示新坐标,rny'= y+ty, y' 表示新坐标.rnscale: rnx' = x*sx, x' 表示新宽度,rny' = y*sy, y' 表示新高度.rnrn可是:rnrotate:rnx’ = x*cosθ-y*sinθ+0 = x*cosθ-y*sinθrny’ = x*sinθ+y*cosθ+0 = x*sinθ+y*cosθ rn这里的 x' 和 y' 值表示什么?rnskew:rnx’ = x+y*tan(θx)+0 = x+y*tan(θx)rny’ = x*tan(θy)+y+0 = x*tan(θy)+y rn这里的 x' 和 y' 值表示什么?rn
CSS3 transform的常用属性 总结
 transform属性值:              一、transform: translate(); 1、translate()函数可以将元素向指定的方向移动,类似于position中的relative。可以把元素从原来的位置移动,而不影响在X、Y轴上的任何Web组件。 2、translate()的括号内包含两个值,分别为相对于元素原有位置在水平方向和垂直方向的偏移值。 3、向下、向右为...
CSS3 3D转换-transform
本套课程分为UI设计基础课程、Web前端通用代码与UI交互实现、移动端Web前端与UI实现三个大章节,课程讲述UI设计、Flash、交互设计、HTML5、CSS3、JavaScript等web前端技术。凡是购买本套课程的学员,可以加QQ群: 152364681,专业讲师进行在线答疑与指导,学不懂有疑问,随时问,永久服务,并赠送海量web前端练习素材,名师一路陪伴,让学员真正成为一名优秀的web前端工程师。n
整理CSS3的transform属性
transform为CSS3的新属性,我在这里只是整理一下我们常用到的属性,供大家参考 1、transform需要写浏览器兼容 div { transform:rotate(7deg); -ms-transform:rotate(7deg); /* IE 9 */ -moz-transform:rotate(7deg); /* Firefox */ -webkit-transform:ro
CSS3 2D转换-transform
CSS3即层叠样式表(Cascading Style Sheet), 在网页制作时采用层叠样式表技术,可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。只要对相应的代码做一些简单的修改,就可以改变同一页面的不同部分,或者页数不同的网页的外观和格式。n本课程讲述了CSS3的实战应用,包括对网页修改以及对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。
css3的新增属性transform
css3中可运用transform属性来实现让文字或图像显示出:旋转rotate,缩放scale,倾斜skew,移动translate 这些效果。 1. 旋转rotate    -ms-transform: rotate(30deg) ;     -moz-transform:rotate(30deg); -webkit-transform:rotate(30deg); -o-trans
CSS3(五) Transform的实现原理
Transform CSS3中,transform属性允许盒子模型被进行二维或三维空间坐标的变换。使用该属性之后,元素主要可以进行以下变换: 旋转(rotate) 平移(translate) 缩放(scale) 倾斜(skew) 下面的图片我们实现了一个旋转和缩放的变换、然后结合animation属性实现了一种常见的动画效果。 项目源码 T...
CSS3的transform属性(二)
前面介绍了基本的变形方式(旋转,移动,缩放,倾斜)。现在来介绍和这些变形方式相关联的属性。 transform-origin 每个元素都有一个形变中心点。元素的旋转缩放等形边都是基于形变中心点变化的。形变中心点的坐标是以元素的左上角为坐标原点的。 上图 backface-visibility backface-visibility此属性定义元素旋转到背面是否可见。 默认值为visi...
CSS3 元素的变形(transform)
CSS3新增了transform属性,可用于元素的变形,实现元素的旋转、缩放、移动、倾斜等 变形效果。 transform基于webkit内核的替代私有属性是-webkit-transforn;   基于gecko内核的替代私有属性是-moz-transform;   基于presto内核的替代私有属性是-o-transform;   基于IE浏览器的替代私有属性是-ms-transfo
CSS3 变换/变形(transform)
变换在CSS3之前,要实现元素的平移、旋转、缩放和倾斜效果,常常需要依赖图片、Flash或Javascript才能完成。在CSS3中,使用变换(transform),就能轻松实现这些效果,而无需加载额外的文件,在提升开发效率的同时,还能提高页面的执行效率。变换的基本原理,是通过改变坐标系统,来实现元素的平移、旋转、缩放和倾斜等效果。把实现平移、旋转、缩放、倾斜等所使用的方法,称作变换函数,它们分别...
CSS3 基础(5)—— CSS3转换(Transform)
一、Transform转换 让一个元素在一个坐标系统中变形。这个属性包含一系列变形函数,可以移动、旋转和缩放元素。 语法 transform: none | &amp;amp;amp;amp;amp;amp;amp;lt;transform-function&amp;amp;amp;amp;amp;amp;amp;gt; [&amp;amp;amp;amp;amp;amp;amp;lt;tranform-function&amp;amp;amp;amp;amp;amp;amp;gt;]*;
css3 transform定位盒子居中
&amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;Document&amp;lt;/title&amp;gt; &amp;lt;style&amp;gt; section{ wi
css3之2d转换(transform方法)
学习资料:菜鸟教程,http://www.runoob.com/css3/css3-2dtransforms.html; 1.transform的属性之一:translate移动, translate()方法,根据左(X轴)和顶部(Y轴)位置给定的参数,从当前元素位置移动。 效果不是特别好看,直接上代码; css代码 #tanslate{                 heigh
CSS3 中的变形处理——transform
transform 功能的基础知识,可以利用 transform 功能来实现文字或者图像的旋转,缩放,倾斜和移动这四种类型的变形处理。对一个元素使用多种变形的方法,而且在一个元素中可以同时添加多个变形处理,是元素有更好的表现效果。顺序不一样,结果不一样指定变相的基准点,在使用 transform 方法进行文字或图像的变形时,是以元素的中心点为基准点进行的。此时可以通过 transform-orig...
css3中的变形功能 transform
1  使用transform能是文字、图像进行拉伸变形,或者移动。
CSS3 Transform变形(3D转换)
CSS3 3D 转换 三维变换使用基于二维变换的相同属性,如果您熟悉二维变换,你们发现3D变形的功能和2D变换的功能相当类似。CSS3中的3D变换主要包括以下几种功能函数: 3D位移:CSS3中的3D位移主要包括translateZ()和translate3d()两个功能函数; 3D旋转:CSS3中的3D旋转主要包括rotateX()、rotateY()、rotateZ()和rotate3d()...
总结CSS3变形transform属性
在网页设计中,css被习惯于理解为擅长表现静态样式,动态的元素必须借助于flash或javascript才可以实现,CSS3将来改变这一思维方式。CSS3除了增加很大革命性的创新功能外,还提供了对动画的支持,可以实现旋转,缩放,移动,倾斜和过渡效果等等,这些功能再一次证明了CSS功能的强大和无限潜能。  CSS3实现元素变形的基础。来源于新增的transform属性,该元素可用于实现元素的旋转,缩放
CSS3:transform 多属性顺序
  黑色方块是初始位置,红色是  transform:rotate(45deg) translate(100px, 100px);                                       绿色是   transform:translate(100px, 100px) rotate(45deg) ; 初始CSS:        &amp;lt;style&amp;gt; ...
css3中animation和transform同时使用的问题
对于同一个div,先通过transform改变其初始状态,再使用animation使其动画化,则当div开始动作后transform失效。解决办法:外层再加一层div,对外层的div进行transform,对内层div进行animation。...
关于TRANSFORM 排序 的问题
TRANSFORM COUNT([全部违纪].[地点])rnrnSELECT [全部违纪].[地点], COUNT( * ) AS 数量rnFROM 全部违纪rnGROUP BY [全部违纪].[地点]rnORDER BY COUNT([全部违纪].[地点]) DESC <-这句有问题,说不能有合计数.但去掉TRANSFORM 和 PIVOT 行查询是成功的.rnrnPIVOT IIF([全部违纪].[队属]='内部', '内部', '外部');rnrn想按数量排序生成表格为rn地点 数量 内部 外部rnrn其中数量是某地点查处的所有违纪.内部是自己查的,外部是别人查的.rnrn请高手帮忙解决一下,我想直接生成排完序的表!~
关于 transform 的问题
有一个SQL 语句,是:rntransform count(com-id)*10000+sum(com-pric) select com-name from ship-trnlog where …………rn这里 transform 是什么意思?在SQL语言里怎么从来就没有看到过?
3D的缩放--scale3d
本季课程为CSS特效篇,着重介绍了使用CSS使用页面的特效以实现页面的美化。课程的讲解中结合了大量的案例演示,通过案例演示可以清楚的加深对CSS常见数据的理解, 学习的过程中,一定要动手实战,这样才能真正的领悟到CSS特效的使用细节。
关于TransForm的相关的类的问题?
能否举一个利用下面3各类的的典型应用的例子:rnCTransformFilterrnCTransformIuputpinrnCTransformOutputPin rnrn注:在DXSDK的Filters.dsw中提供了一些,但是由于水平有限,所以不可能全部看懂,所以还请高手指点,非常感谢!!!
!!一个关于 XML transform 的问题!
我有一个 XML 文件,通过 XSL transform 以后生成另外一个 XML 文件,然后生成的文件没有默认编码,我希望编码是 GB2312。rnrn请大家帮忙看看!多谢了!
CSS3 3D transform变换的重要讲解
在学习3D变换的过程中,查了很多资料,但是感觉以下这篇文章写的不错(有点污) 好吧,CSS3 3D transform变换,不过如此! http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/
CSS3中transform移动属性的使用
问题?CSS3中transform移动属性的使用 原理:该属性是将原来存在的元素发生位置的变化,包括旋转角度,水平,垂直位置的变化。 transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。 例子: #div1{ width: 200px; height: 200px; background-color: blue
transform属性——css3变形效果3D
由于3D是立体三维,在x、y轴的基础上一般会多出一个z轴,深入跃出轴。 要使用transform实现3D效果,首先需要为该元素或该元素的直接父元素设置如下2个属性属性 1、transform-style     该属性是指定嵌套元素如何在3D空间中呈现 属性值:  flat            默认值,表示所有子元素在2D平面呈现           preserve-3d     表示
CSS3新属性篇(一):transform属性
在CSS3中,可以利用transform功能来实现文字或图像的旋转、缩放、倾斜、移动这四种类型的变形处理,以下将详细说明各个属性。 一、移动 translate 用法:transform: translate(45px) 或者 transform: translate(45px, 150px); 参数表示移动距离,单位px, 一个参数时:表示水平方向的移动距离; 两个参数时:第一个...
css3中transform与matrix矩阵对应关系
今天的需求有一个要用到获取元素对象的缩放比例,这很简单啊! .container { transform: scale(0.9,0.9) } var scale = $('.container').css('transform'); 然后就是:matrix(0.9, 0, 0, 0.9, 0, 0) 一脸懵D啊!?!?!?!?!!?! 这是个什么鬼????? 然后各种找,才知道这其实是因为在...
深入理解CSS3里的transform变换
transform变换不会影响元素在文档流中的位置 &amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;&amp;nbsp;transform是CSS3中实现各种炫酷效果的样式属性,基础的转换函数有缩放scale()、平移translate()。transform对元素在文档流中的盒模型的影响就相当于position:relative,不会改变盒模型,包括大小和位置。 在animation的@...
CSS3的transform属性实现旋转正方体
代码如下: Document 1 2 3 4 5 6 ul{ position:relative; height:300px; width:300px; list-style:none; margin:100px auto; transfor
从零开始学 Web 之 CSS3(五)transform
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新…… github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:http://www.cnblogs.com/lvonve/ CSDN:https://blog.csdn.net/lvonve/ 在这里我会从 Web 前端零基...
CSS3特效之转化(transform)和过渡(transition)
在对动画深入之前,我们需要先了解它的一些特性,CSS3的转化(transform)和过渡(transition)。有人可能会有疑问,CSS3动画不是只有animation一个属性吗?怎么又和转化(transform)和过渡(transition)扯上关系了,其实并非如此,转化(transform)属性让动画的变换多元化,而过渡(transition)属性是动画中的一种表现形式,也可以说成是动画一个版
css3 transform实现散乱的照片排列.zip
css3 transform实现散乱的照片排列是一款简单零散的css3相册排列特效下载。
CSS3之transform之rotate二维、三维注意点
transform:rotateX(30deg);            二维旋转X transform:rotateY(30deg);            二维旋转Y transform:rotateZ(30deg);            二维旋转Z transform:rotate(30deg,30deg);            二维旋转X,Y transform:rot
CSS3 transform图片飞入动画特效.zip
js代码 [removed] var box = document.getElementById("box"); var aImgs= box.getElementsByTagName("img"); window.onload = function(){ for(var i=0;i<aImgs.length;i ){ aImgs[i].className="on"; } } [removed] 这是一款基于CSS3 transform图片飞入动画特效,仿唱吧首页图片从左右两边飞入动画效果。
css3 animation transform鱼游动动画特效.zip
&lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;css3 animation transform鱼游动特效&lt;/title&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /&gt; &lt;meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"&gt; &lt;style&gt; body{ background-color: lightblue; overflow:hidden; } .fishbox{ width: 200px; height: 200px; /*background-color: rgba(0,0,0,0.4);*/ position: absolute; left:0; top:0; animation: run 20s linear infinite; animation-direction: normal; } .fish{ width: 174px; height: 126px; position: absolute; left:35%; top:0; background:url(image/fish8.png) no-repeat left top; /*transition:all 0.8s steps(8) ;*/ animation:active1 0.8s steps(8) infinite; 这是一款基于css3 animation transform属性制作的鱼游动动画特效,用background-position属性实现两条游动追逐的鱼。
Jquery使用animate实现css3的transform动画效果
首先,Jquery并不支持在animate的样式中的transform效果,这里通过使用animate的回调函数来实现。 $(xxx).animate({},function(){                                        //第一个中括号里面是动画内容,可以为空,但不能省去中括号 $(xxx).css({'aa':'bbbbb','cc':'ddddd'
CSS3 transform实现图片旋转木马3D
css3 transform 3D 图片旋转木马
【CSS3】transform变形--慕课网【学习总结】
1.旋转 rotate() 2.扭曲 skew() 3.缩放 scale() 4.位移 translate() 5.矩阵 matrix() 6.原点 transform-origin()
相关热词 c# 线程顺序 c#昨天当前时间 c# 多进程 锁 c#mysql图片存取 c# ocx 委托事件 c# 读取类的属性和值 c# out 使用限制 c#获取url的id c#怎么进行分页查询 c# update 集合