css3的transform:tanslateZ没有效果

时间: 2019-06-08阅读: 27标签: 效果

关于css动画tansform:translateZ(100PX)没有效果的记录

之前学习cs3动画就学的迷迷糊糊的,这次项目中刚好用到了cs3动画,遇到了一个问题,记录下来,方便后期查阅
在使用 tansform属性时,值设为tansform:translateX或tansform:translateY都是可以的,但是设置成tansform:translateZ就没有动画效果


排查

1.一般遇到Z轴的动画就要小心点了,因为需要设置其他属性值,记得有个什么3D舞台,所以首先加上transform-style:preserve-3d(在变形元素自身上指定该属性是没有用的,它用于指定舞台,所以要在变形元素的父元素上设置该属性)

另外如果同时设了transform-style: preserve-3d;和overflow: hidden;,3D效果将失效  

2.将所有的overflow: hidden去掉,再次运行,发现还是失效

3.看到有个地方介绍到perspective属性,尝试了一下,真的就好了


结束

搜索了下,页面之前用到的关于tansform:translateZ的样式,发现全都不好使,加了上面的perspective属性就好了

以轮播效果为案例谈如何写优质代码

作为程序员大家在写代码时谈的最多的就是代码的拓展性、复用性。本文就以大家熟悉的轮播效果为案例,讲一讲写优质代码的思路和实践。文章分三个步骤。第一步,实现基本功能

原生JS快速实现拖放(drag and drop)效果

拖放是很常见的一种交互效果,很多时候我们都会借助于第三方的控件来实现,其实用原生js实现起来也非常的方便。接下来我们就用原生js和css快速实现这样的拖放效果:

CSS :placeholder-shown伪类实现输入框浮动文字效果

当我们处理输入框时,会想方设法提供给用户更好的体验。有两个标签属性是我们经常会用到的:label标签是关联表单元素,提供说明信息最适合的元素。输入框的placeholder属性允许您指定没有输入内容时出现在<input>元素内的文本

CSS3实现柱状图的3D立体动画效果

尝试使用纯CSS来实现相同的效果。一开始的难点在于创建一个六面半透明的立方体,而后面的难点在于如何创建一个完整的带有动画效果的3D柱状图,下面,我们就一起来看一下如何解决这些难点

使用CSS实现逼真的水波纹点击效果

虽然webkit具有遮罩的能力(webkit mask),不过webkit虽然强大,但在跨浏览器上总是它的罩门,况且在性能上也是往往会造成困扰(这也是为什么chrome要这么吃资源了),因此撇开webkit不谈,我们该用什么方法,才可以做出水波纹的效果呢?

css实现页面翻转 正反两面展示不同的内容

页面旋转使用css3的rorateY(180deg) 实现页面的翻转,使用backface-visibility 实现正面元素翻转之后背面不可见,显示出反面的元素,demo:<div><div>反面的内容</div><div>正面的内容</div></div>

CSS 搞怪的 text-decoration

今天在改一个项目的时候却遇到了一个莫名其妙的属性:text-decoration,这个属性,其实就只是用来把一段文字加上上横线、删除线或底线的属性罢了,通常会用在移除超链接的底线、或一些特殊强调的效果里头

强大的CSS:用纯css模拟下雪的效果

下雪效果只是一类效果的名称,可以是红包雨等一些自由落体的运动效果,本文就是用纯css模拟下雪的效果,更多效果大家可以自行发挥。浏览器实现动画无非css3和canvas(还有gif)

css滚动视差之水波纹效果

核心属性: background-attachment;这个属性就牛逼了, 它可以定义背景图片是相对视口固定,还是随着视口滚动, 加上这个属性网页瞬间就从屌丝变成高大上。

CSS实现文字下面波浪线动画效果

就是使用径向渐变绘制我们的波浪线效果,一个波浪线循环段是有一个朝上的半个圆弧和一个朝下的半个圆弧组合而成的。所以,我们只要使用径向渐变绘制圆弧

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全