关于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的三D效果transform实例
要用CSS3实现3D效果,先看个图rnrnrnperspective设置景深,也就是Z轴的距离。rnperspective-origin:设置视角,不同视角看到同一个立体是不同的表现。rn设置好这些,就可以构建你想要的,立体图形,在构建前,构建前生成容器,要让容器内元素也保持3D效果,就要在样式添加transform-style: preserve-3d;rn定义容器内元素位置,用到transfo
transform属性——css3变形效果3D
由于3D是立体三维,在x、y轴的基础上一般会多出一个z轴,深入跃出轴。rn要使用transform实现3D效果,首先需要为该元素或该元素的直接父元素设置如下2个属性属性rn1、transform-style     该属性是指定嵌套元素如何在3D空间中呈现rn属性值:  flat            默认值,表示所有子元素在2D平面呈现rn          preserve-3d     表示
transform: scale() 图片文字模糊的原因
今天做一个刮刮乐H5应用的时候,用到了个简单的 CSS 动画效果,就是使用缩放transform: scale(.1) 从小变大弹出获奖窗口,以及按钮重复变大变小的动画,结果遇到个很郁闷的问题,按钮和文字变得非常模糊,完全没法看,很是奇怪,搞了半天才找到原因:因为使用了两层缩放,导致第二次缩放继承或者说使用的按钮渲染尺寸已经不是原来正常的尺寸,而是之前被缩放后的尺寸导致当前缩放模糊,有点晕哈。具体动
关于CSS3的3D效果样式transform属性中的rotate3d
1.介绍在css3中新加了一些3d特效,如translate3d,scale3d,rotate3d,与css3中的2d特效最大的区别就是多了个z轴,因此才有了3d效果。因为scale3d(x,y,z)等价于scaleX(x),scaleY(y),scaleZ(z)分别对x,y,  z坐标值进行缩放,比较容易理解,translate3d平移也是类似,比较简单,这里就不就介绍了,详细请参考http:/...
css3动画系列之scale()方法
rn浏览器支持情况:rnInternet Explorer 10、Firefox 以及 Opera 支持 transform 属性。rnChrome 和 Safari 需要前缀 -webkit-。rn注释:Internet Explorer 9 需要前缀 -ms-。rn rnscale() 方法rn通过 scale() 方法,元素的尺寸会增加或减少,根据给定的宽度(X 轴)和高度(Y 轴)参数:r...
CSS3-transform-transform影响子级的固定定位
在进行限制范围拖拽代码编写时,父级为固定定位,子级为固定定位,给父级加transform,html和css代码分别如下:
使用scale 和 transform-origin 实现下划线跟随效果
使用scale 和 transform-origin 实现下划线跟随效果nn难点所在nnn这个动画效果中,下划线是从一端进入,从另外一端离开的。而且,这个 hover 动画是纯 CSS 实现的。nnn还原效果nnn正常而言,我们一个 hover 效果,可能就是从哪里来,回哪里去,大部分的应该是这样的:nnnhtml : n &amp;amp;amp;lt;div&amp;amp;amp;gt;hover me&amp;amp;amp;lt;/div&amp;amp;amp;gt;ncs...
关于transform属性的详细介绍
了解transform的3D效果之前,先了解一下坐标和透视(perspective)一、关于坐标在了解透视之前,首先要先了解坐标轴。3D变形与2D变形最大的不同就在于其参考的坐标轴不同。2D变形的坐标轴是平面的,只存在x轴和y轴,而3D变形的坐标轴则是x、y、z三条轴组成的立体空间,x轴正向、y轴正向、z轴正向分别朝向右、下和屏幕外二、关于透视perspectiveperspective:none...
scale和transform-origin控制动画的方向
从左进入,右边离开我们将一个 hover 动画分解为 3 个部分:hover 进入状态hover 停留状态hover 离开状态但是,对于一个 hover 效果而言,正常来说,只有初始状态,和hover状态两种。可能我们的代码是这样:div {    xxxx...} div:hover {    xxxx...}对于一个 hover transition 动画,它应该是从:正常状态 -&amp;gt; h...
css3开发:2D变形功能总结
一、基本操作nn1.旋转:nntransform:rotate(顺时针旋转的度数);nn2.缩放nntransform:scale(水平方向缩放的比例,垂直方向缩放的比例);nn3.倾斜nntransform:skew(水平方向上倾斜的角度,垂直方向上倾斜的角度);nn4.移动nntransform:translate(水平方向上偏移的距离,垂直方向上偏移的距离);nn5.matrxi方法把以上的...
css3——transform:rotate(旋转)、scale(缩放)、skew(拉伸)、translate(平移)、transform-origin
注意:transform是复合属性,拆开写会替代,先平移再旋转和先旋转再平移的结果是不同的nn1. CSS3 转换:transform属性可以对元素进行移动、缩放、转动、拉长或拉伸nn注意: Internet Explorer 9 要求前缀 -ms- 版本,Internet Explorer 10, Firefox, 和 Opera支持transform 属性,Chrome 和 Safari 要求...
css3 rotateY 会盖住下面的元素
css3 rotateY 会盖住下面的元素rnrn要适当的调整rn -webkit-transform: rotateY(-40deg);rn -webkit-transform: rotateY(40deg);查看原文:http://newmiracle.cn/?p=1308
CSS3--transform与坐标系统
explain:(默认以中心为转换点)nnnncode:nn
CSS3 transform介绍|如何设计炫酷的动画效果
CSS里transform变形这个属性有点学习难度,尤其在CSS3里加上了3D效果之后,2维变3维学习成本更是成倍提高。为什么设计师的眼里饱含着泪水,因为对页面效果爱的深沉。本篇就介绍一下transform。(擎天柱:Autobotrn transform!)rnrnrnrntransform本质上是一系列变形函数,分别是translate位移,scale缩放,rotate旋转,skew扭曲,ma
transform的3D效果实现
一:立方体及其旋转效果原理:构建一个立方体,四方体共有六个面,采用定位及其位移旋转实现。&amp;lt;div class=&quot;rect-wrap&quot;&amp;gt;      &amp;lt;div class=&quot;container&quot;&amp;gt;          &amp;lt;div class=&quot;top slide&quot;&amp;gt;&amp;lt;img src=&quot;images/17.jpg&quot; title=&quot;
CSS3中的动画,animation、transition和transform属性的运用
CSS3中使用animation属性,可以不适用JavaScript而制作动画,运用的好,可以做到很多漂亮的效果,最近有空,来摸索一下animation的使用,做几个demo玩玩animation属性的介绍animation属性能够改变元素的位置和各种css属性animation 属性是一个简写属性,用于设置六个动画属性:nanimation-name 需要绑定到选择器的keyframe的
小程序scale缩放时出现模糊
经过两次缩放,字体会变得非常模糊。如图,特别是字体特别小的时候。nn解救办法:transform:translate3d(2%, 2%, 0)scale(0.9);实现先放大再缩小这样就可使清晰度升高。n解决后,如图:nnn...
CSS3 transform 字体模糊问题
使用 Vue Material 的 Dialog 做了一个弹出框,弹出框内动态绑定了几个数据,页面效果一出来nnnnnnnnWhat the fuck? 马赛克?nVue Material 的组件肯定没问题,应该自己代码哪问题,先把官网提供的例子在项目中运行了一下,效果正常。然后加上项目效果代码,显示一个动态数据,字体之类的都变模糊了,看来动态绑定的数据会...
css3中animation和transform同时使用的问题
对于同一个div,先通过transform改变其初始状态,再使用animation使其动画化,则当div开始动作后transform失效。解决办法:外层再加一层div,对外层的div进行transform,对内层div进行animation。...
图片transform其父级的border-radius失效
当transform遇见border-radius就会碰出bug的火花
CSS3的transform以及3D相关属性总结
CSS3的3D相关属性总结概述项目中遇到微交互、增加页面用户体验的需求,运用CSS3的transform变化的3D属性就可以达到效果。transform概述W3C 的解释:CSS Transforms is a module of CSS that defines how elements styled with CSS can be transformed in two-dimensional ...
关于rotate动画在ios设备无效的问题
最近在一个页面里做一个扑克牌的旋转效果,测试的时候发现,在chrome上和Android设备上旋转效果都是没问题的,但是在ios设备上就完全没效果,这可急坏了宝宝,网上各路大神给的解决方案都是加上-webkit-前缀就可以,但是我试了一下,还是没有效果,之后就开始一路寻找破解方案之路。
CSS3(五) Transform的实现原理
Transformnnnnn CSS3中,transform属性允许盒子模型被进行二维或三维空间坐标的变换。使用该属性之后,元素主要可以进行以下变换:n n n 旋转(rotate)n 平移(translate)n 缩放(scale)n 倾斜(skew)n nnn下面的图片我们实现了一个旋转和缩放的变换、然后结合animation属性实现了一种常见的动画效果。 nnn项目源码nnT...
CSS3新属性篇(一):transform属性
在CSS3中,可以利用transform功能来实现文字或图像的旋转、缩放、倾斜、移动这四种类型的变形处理,以下将详细说明各个属性。nnnn一、移动 translatenn用法:transform: translate(45px) 或者 transform: translate(45px, 150px);nn参数表示移动距离,单位px,nnn一个参数时:表示水平方向的移动距离;n两个参数时:第一个...
css3缩放 transform: scale() 使用缩放之后顶点对齐问题
css3缩放 transform: scale() 使用缩放之后顶点对齐问题nn注意点:想要将缩放之后的div对齐顶点,那么需要将css属性设置为:transform-origin: 0 0nnn&lt;div style="width: 900px; height: 900px; background: gray; overflow: auto;"&gt;n &lt;div style="...
css3 Transition动画执行时有可能会出现闪烁的bug
css3 Transition动画执行时有可能会出现闪烁的bug,一般出现在开始的时候或结束的时候。解决方法如下: n-webkit-backface-visibility: hidden; n-webkit-transform-style: preserve-3d; 需要应用在动画元素上即可 n估计是Chrome在初始渲染CSS动画时产生的Bug
关于transform:rotate()在ios上不生效的坑
问题:今天使用css3的rotate做旋转动画,在浏览器里面调试没问题,自己手机上也测试了一番(小米机)都没有问题,让ui访问我的地址看一下满意不,结果发现在ios手机上显示不出来。。。nn猜想:rotate存在兼容问题?nn测试:查了一下资料,给@keyframes和transform增加上-webkit-前缀来做兼容nn结果:ios手机还是毫无效果。。nn继续猜想:查一下资料,猜测是不是视角的...
CSS3 will-change提高页面动画等渲染性能
今天突然看到这个will-change 觉得好新鲜,就百度一看,才知道人家早就出来(我out了),只是现在各个浏览器还不怎么兼容,为了满足我的好奇心,就来了解下呗。rn如果你已经试验和利用过这些CSS3的属性,你可能碰到类似CPU、GPU和硬件加速等术语。让我们快速的掌握这些术语:rn   ①CPU即中央处理器,它的功能主要是解释计算机指令以及处理计算机软件中的数据,也被称为主板。rn   ②GP
解锁css3新姿势之transform3D各属性及transform兼容之矩阵写法
闲来无事,整理一下可以打造炫酷网站的一些transform的属性n 1. 矩阵transform:matrix() n 这个矩阵哥们是有些厉害的,不得不多说两句,这哥们可以同时写上缩放,旋转,拉伸,位移等变形;详细内容见下面 n 2.transform-style:preserve-3d;创造3D空间 n 3.transform:rotate;2D旋转; n 4.trans
CSS3+Transform
实现针对于Webkit(Google Chrome,Safari)、Moz(Firefox)以及Opera浏览器的一些变换效果,包括旋转、倾斜、缩放、位移效果。
css3中transform:translateY之后文字模糊的原因
原因: transform的区域高度是奇数 n解决方案: transform的区域高度设置成偶数
不要忘了css3动画效果transform 和过渡效果 transition:属性 时间 运动效果 延迟时间;
不要忘了css3动画效果transform 和过渡效果 transition:属性  时间 运动效果 延迟时间;
CSS3中transform移动属性的使用
问题?CSS3中transform移动属性的使用rn原理:该属性是将原来存在的元素发生位置的变化,包括旋转角度,水平,垂直位置的变化。rntransform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。rnrn例子:rn #div1{n width: 200px;n height: 200px;n background-color: blue
脚本化,伪元素,css3—transform transition
div.style.width/heigth/borderRadius…edgn1.可读可写,改变css样式n2.写入的值必须是字符串格式n3.组合单词变成小驼峰书写n-&amp;amp;amp;amp;amp;amp;gt;div.stylen&amp;amp;amp;amp;amp;amp;lt;-CSSStyleDeclaration {alignContent: &amp;amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp;quot;, alignItems: &a
css3利用transform实现简单的旋转效果
Titlen n @-webkit-keyframes rotation{n from {-webkit-transform: rotate(0deg);}n to {-webkit-transform: rotate(360deg);}n }n .Rotation{n animati
CSS3的transform属性实现旋转正方体
代码如下:nnnn n Documentn nnn n 1n 2n 3n 4n 5n 6n n n ul{n position:relative;n height:300px;n width:300px;n list-style:none;n margin:100px auto;n transfor
css3中的变形(transform)、过渡(transtion)、动画(animation)
总是记不清,特地写一下nn nn第一个 transform:向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。nn英 [trænsˈfɔ:m]   美 [trænsˈfɔ:rm] nn语法:transform: none|transform-functions;   none指的是效果,包含参数如下:nnnonen 定义不进行转换。n matrix(n,n,n...
CSS3 3D旋转(transform),平移,放大/缩小,倾斜
参见:https://blog.csdn.net/houyanhua1/article/details/79659096demo.html:&amp;lt;!DOCTYPE html&amp;gt; n&amp;lt;html lang=&quot;en&quot;&amp;gt; n&amp;lt;head&amp;gt; n &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; ...
【前端】【html5/css3】前端学习之路(三)(CSS3 2D变形/CSS3 3D变形/CSS3浏览器前缀)
一、2D变形(CSS3) transformnntransform是CSS3中具有颠覆性的特征之一,可以实现元素的位移、旋转、倾斜、缩放,甚至支持矩阵方式,配合过渡和即将学习的动画知识,可以取代大量之前只能靠Flash才可以实现的效果。nn1.移动【  translate(x, y)  】nntranslate是移动、平移的意思,也就是在2D平面内以X轴和Y轴为标准进行移动。nnnn格式(x和y可...
transform属性不能同时写scale和rotate,怎么办??
<div class="outScale">n <div class="innerRotate">n <img src="" alt="暂无图片"/>n </div>n</div>当一个图片既要实现旋转需求,又要实现放大需求,但是transform属性不能同时写scale和rotate,这怎么办 n解决方案是: n在图片外套两层div。 nadvice:外层的s
文章热词 机器学习教程 Objective-C培训 交互设计视频教程 颜色模型 设计制作学习
相关热词 mysql关联查询两次本表 native底部 react extjs glyph 图标 css3网页制作教程 css3网页制作视频教程