关于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效果,先看个图 perspective设置景深,也就是Z轴的距离。 perspective-origin:设置视角,不同视角看到同一个立体是不同的表现。 设置好这些,就可以构建你想要的,立体图形,在构建前,构建前生成容器,要让容器内元素也保持3D效果,就要在样式添加transform-style: preserve-3d; 定义容器内元素位置,用到transfo
CSS3转换属性(transform)3D及动画属性(animation)入门——旋转立方体示例
这次我们来实现这样一个绕中轴旋转的立方体:点击预览 相对之前的2D转换,这次的坐标轴还用到了z轴。为了便于理解,首先来看一下浏览器的坐标轴: 效果:https://codepen.io/hellozpf/pen/ejxVNZ (待完成...)...
transform属性——css3变形效果3D
由于3D是立体三维,在x、y轴的基础上一般会多出一个z轴,深入跃出轴。 要使用transform实现3D效果,首先需要为该元素或该元素的直接父元素设置如下2个属性属性 1、transform-style     该属性是指定嵌套元素如何在3D空间中呈现 属性值:  flat            默认值,表示所有子元素在2D平面呈现           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:/...
妙用 scale 与 transfrom-origin,精准控制动画方向
上次发完 不可思议的纯 CSS 导航栏下划线跟随效果 这篇文章之后,很多朋友找我讨论,感叹 CSS 的奇妙。 然后昨天,群里一位朋友问到了一个和这个效果比较类似的效果,问如何 将下面这个动画的下划线效果,从左进入,右边离开修改为从上方进入,下方离开。 描述很难理解,看看原本的效果: 难点所在 第一眼看到这个效果,我的内心毫无波澜。以为只是简单的一个下划线 hover 效果,经过友人提醒,才发现,...
解决HTML5 scale缩放空白问题
现有IOS应用,邮箱功能需要预览邮箱内容,但是邮箱内容都是有固定高宽,也就是这个页面实际上是在PC上显示, 所以现在,在APP上预览时就出现内容过宽,过长;导致APP页面被拉伸变的很丑; html中使用的iframe嵌套的邮箱内容;网上都说IOS上使用iframe有诸多问题,实际上我并没有发现像网友说的那么不堪; 使用iframe嵌套网页后,使用scale进行缩放会存在,下端空白问题。 现...
关于transform属性的详细介绍
了解transform的3D效果之前,先了解一下坐标和透视(perspective)一、关于坐标在了解透视之前,首先要先了解坐标轴。3D变形与2D变形最大的不同就在于其参考的坐标轴不同。2D变形的坐标轴是平面的,只存在x轴和y轴,而3D变形的坐标轴则是x、y、z三条轴组成的立体空间,x轴正向、y轴正向、z轴正向分别朝向右、下和屏幕外二、关于透视perspectiveperspective:none...
css3开发:2D变形功能总结
一、基本操作 1.旋转: transform:rotate(顺时针旋转的度数); 2.缩放 transform:scale(水平方向缩放的比例,垂直方向缩放的比例); 3.倾斜 transform:skew(水平方向上倾斜的角度,垂直方向上倾斜的角度); 4.移动 transform:translate(水平方向上偏移的距离,垂直方向上偏移的距离); 5.matrxi方法把以上的...
关于rotate动画在ios设备无效的问题
最近在一个页面里做一个扑克牌的旋转效果,测试的时候发现,在chrome上和Android设备上旋转效果都是没问题的,但是在ios设备上就完全没效果,这可急坏了宝宝,网上各路大神给的解决方案都是加上-webkit-前缀就可以,但是我试了一下,还是没有效果,之后就开始一路寻找破解方案之路。
CSS3中的动画,animation、transition和transform属性的运用
CSS3中使用animation属性,可以不适用JavaScript而制作动画,运用的好,可以做到很多漂亮的效果,最近有空,来摸索一下animation的使用,做几个demo玩玩animation属性的介绍animation属性能够改变元素的位置和各种css属性animation 属性是一个简写属性,用于设置六个动画属性: animation-name 需要绑定到选择器的keyframe的
CSS3--transform与坐标系统
explain:(默认以中心为转换点) code:
css3——transform:rotate(旋转)、scale(缩放)、skew(拉伸)、translate(平移)、transform-origin
注意:transform是复合属性,拆开写会替代,先平移再旋转和先旋转再平移的结果是不同的 1. CSS3 转换:transform属性可以对元素进行移动、缩放、转动、拉长或拉伸 注意: Internet Explorer 9 要求前缀 -ms- 版本,Internet Explorer 10, Firefox, 和 Opera支持transform 属性,Chrome 和 Safari 要求...
CSS3 transform介绍|如何设计炫酷的动画效果
CSS里transform变形这个属性有点学习难度,尤其在CSS3里加上了3D效果之后,2维变3维学习成本更是成倍提高。为什么设计师的眼里饱含着泪水,因为对页面效果爱的深沉。本篇就介绍一下transform。(擎天柱:Autobot transform!) transform本质上是一系列变形函数,分别是translate位移,scale缩放,rotate旋转,skew扭曲,ma
css3动画系列之scale()方法
浏览器支持情况: Internet Explorer 10、Firefox 以及 Opera 支持 transform 属性。 Chrome 和 Safari 需要前缀 -webkit-。 注释:Internet Explorer 9 需要前缀 -ms-。   scale() 方法 通过 scale() 方法,元素的尺寸会增加或减少,根据给定的宽度(X 轴)和高度(Y 轴)参数: ...
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 ...
关于z-index与transform同时使用时的一些感想
这篇文章是在我做一个效果是产生的。 陪我逛街卡 使用该卡,无条件陪逛街3小时
CSS3-transform-transform影响子级的固定定位
在进行限制范围拖拽代码编写时,父级为固定定位,子级为固定定位,给父级加transform,html和css代码分别如下:
css3缩放 transform: scale() 使用缩放之后顶点对齐问题
css3缩放 transform: scale() 使用缩放之后顶点对齐问题 注意点:想要将缩放之后的div对齐顶点,那么需要将css属性设置为:transform-origin: 0 0 &lt;div style="width: 900px; height: 900px; background: gray; overflow: auto;"&gt; &lt;div style="...
css3 rotateY 会盖住下面的元素
css3 rotateY 会盖住下面的元素 要适当的调整 -webkit-transform: rotateY(-40deg); -webkit-transform: rotateY(40deg);查看原文:http://newmiracle.cn/?p=1308
CSS3(五) Transform的实现原理
Transform CSS3中,transform属性允许盒子模型被进行二维或三维空间坐标的变换。使用该属性之后,元素主要可以进行以下变换: 旋转(rotate) 平移(translate) 缩放(scale) 倾斜(skew) 下面的图片我们实现了一个旋转和缩放的变换、然后结合animation属性实现了一种常见的动画效果。 项目源码 T...
CSS3+Transform
实现针对于Webkit(Google Chrome,Safari)、Moz(Firefox)以及Opera浏览器的一些变换效果,包括旋转、倾斜、缩放、位移效果。
CSS3新属性篇(一):transform属性
在CSS3中,可以利用transform功能来实现文字或图像的旋转、缩放、倾斜、移动这四种类型的变形处理,以下将详细说明各个属性。 一、移动 translate 用法:transform: translate(45px) 或者 transform: translate(45px, 150px); 参数表示移动距离,单位px, 一个参数时:表示水平方向的移动距离; 两个参数时:第一个...
小程序scale缩放时出现模糊
经过两次缩放,字体会变得非常模糊。如图,特别是字体特别小的时候。 解救办法:transform:translate3d(2%, 2%, 0)scale(0.9);实现先放大再缩小这样就可使清晰度升高。 解决后,如图: ...
解锁css3新姿势之transform3D各属性及transform兼容之矩阵写法
闲来无事,整理一下可以打造炫酷网站的一些transform的属性 1. 矩阵transform:matrix() 这个矩阵哥们是有些厉害的,不得不多说两句,这哥们可以同时写上缩放,旋转,拉伸,位移等变形;详细内容见下面 2.transform-style:preserve-3d;创造3D空间 3.transform:rotate;2D旋转; 4.trans
关于transform:rotate()在ios上不生效的坑
问题:今天使用css3的rotate做旋转动画,在浏览器里面调试没问题,自己手机上也测试了一番(小米机)都没有问题,让ui访问我的地址看一下满意不,结果发现在ios手机上显示不出来。。。 猜想:rotate存在兼容问题? 测试:查了一下资料,给@keyframes和transform增加上-webkit-前缀来做兼容 结果:ios手机还是毫无效果。。 继续猜想:查一下资料,猜测是不是视角的...
CSS3中transform移动属性的使用
问题?CSS3中transform移动属性的使用 原理:该属性是将原来存在的元素发生位置的变化,包括旋转角度,水平,垂直位置的变化。 transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。 例子: #div1{ width: 200px; height: 200px; background-color: blue
不要忘了css3动画效果transform 和过渡效果 transition:属性 时间 运动效果 延迟时间;
不要忘了css3动画效果transform 和过渡效果 transition:属性  时间 运动效果 延迟时间;
图片transform其父级的border-radius失效
当transform遇见border-radius就会碰出bug的火花
CSS3的transform属性实现旋转正方体
代码如下: Document 1 2 3 4 5 6 ul{ position:relative; height:300px; width:300px; list-style:none; margin:100px auto; transfor
css3中的变形(transform)、过渡(transtion)、动画(animation)
总是记不清,特地写一下   第一个 transform:向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。 英 [trænsˈfɔ:m]   美 [trænsˈfɔ:rm]  语法:transform: none|transform-functions;   none指的是效果,包含参数如下: none 定义不进行转换。 matrix(n,n,n...
【前端】【html5/css3】前端学习之路(三)(CSS3 2D变形/CSS3 3D变形/CSS3浏览器前缀)
一、2D变形(CSS3) transform transform是CSS3中具有颠覆性的特征之一,可以实现元素的位移、旋转、倾斜、缩放,甚至支持矩阵方式,配合过渡和即将学习的动画知识,可以取代大量之前只能靠Flash才可以实现的效果。 1.移动【  translate(x, y)  】 translate是移动、平移的意思,也就是在2D平面内以X轴和Y轴为标准进行移动。 格式(x和y可...
css3使用transform出现字体模糊的解决办法
这个问题很奇葩,话不多少直接上代码:.g-dialog-wrapper { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; flex-direction: column; width: 405px; backgro
CSS3--利用transform属性制作时钟效果
首先简单总结一下transform这个属性,transform的含义是:改变,使…变形;转换。 transform的常用属性:        1)rotate()  旋转函数 取值度数              deg  度数              Transform-origin 旋转的基点        2)skew() 倾斜函数 取值度数               skew
css3 skew坐标轴
transform是css3中对于性能来说是比较安全的 在二维空间里面,skew有两个属性值:skewX,skewY,图形的变化也就是针对这两个值来操作; transform: skewX(45deg); 可以看到demo标签向左倾斜45度产生的形变,那么为什么会产生这个形变呢? 因为demo的高度是不变的,只要倾斜角度不是180的倍数,demo的高度始终保持原有的
CSS3 will-change提高页面动画等渲染性能
今天突然看到这个will-change 觉得好新鲜,就百度一看,才知道人家早就出来(我out了),只是现在各个浏览器还不怎么兼容,为了满足我的好奇心,就来了解下呗。 如果你已经试验和利用过这些CSS3的属性,你可能碰到类似CPU、GPU和硬件加速等术语。让我们快速的掌握这些术语:    ①CPU即中央处理器,它的功能主要是解释计算机指令以及处理计算机软件中的数据,也被称为主板。    ②GP
CSS3 3D旋转(transform),平移,放大/缩小,倾斜
参见:https://blog.csdn.net/houyanhua1/article/details/79659096demo.html:&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; ...
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)和过渡(transition)
在对动画深入之前,我们需要先了解它的一些特性,CSS3的转化(transform)和过渡(transition)。有人可能会有疑问,CSS3动画不是只有animation一个属性吗?怎么又和转化(transform)和过渡(transition)扯上关系了,其实并非如此,转化(transform)属性让动画的变换多元化,而过渡(transition)属性是动画中的一种表现形式,也可以说成是动画一个版
css3中通过transform设置盒子居中的解析
通过css3中的transform设置盒子居中