css3的transform:tanslateZ没有效果

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

关于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属性就好了

链接: http://www.fly63.com/article/detial/4123

html刮刮卡效果实现

公司国庆搞了个集卡、抽奖小活动。抽奖需要刮刮卡的效果,感觉 css 是实现不了。看我使用 canvas 如何实现刮刮卡效果。clearRect 这是我第一个找到的 API,作用是清除一个矩形区域内的内容

css3实现半圆和圆效果

在css2中,如果需要失效一些圆角或者半圆等等效果,一般是要通过ps等软件来处理的,在CSS3中,则不需要了,只需要通过border-radius就可以实现,大大方便了开发的效率。

用CSS新属性实现特殊的图片显示效果

使用一个或多个图像相关的CSS属性(background-blend-mode, mix-blend-mode, or filter)可以实现许多特殊的图片显示效果。本文转载自Bennett Feely的个人网站,文中共列举了20种图片显示效果。

使用原生JS实现图片放大镜效果

前提先了解数学算法:求遮罩层mask宽度,大图、大图显示区、小图、遮罩层;小图是大图等比缩放的,遮罩层是大图显示区缩放的,小图/大图 = 遮罩层/大图显示区,遮罩层 = 大图显示区*(小图/大图);

CSS实现雨滴动画效果

今天我们要实现的是雨滴效果,不过实现雨滴前,我们先把毛玻璃的效果弄出来,没有玻璃窗,雨都进屋了,还有啥好敲打的。其实就是给一张图片,做了个模糊化的效果,看起来像毛玻璃的效果

css实现中间文字,两边横线效果

vertical-align 属性设置元素的垂直对齐方式。该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。

纯css实现彩虹效果

实现思路:使用box-shadow画赤橙黄绿蓝靛紫7个弧形,拼接在一起;after伪元素写投影样式;彩虹和投影都有动画,用两个嵌套的div容器,父容器来控制图标显示的位置,子容器用来写彩虹的样式

CSS3转换

改变元素在页面中位置,大小,角度以及形状的一种方式:2D转换:只在x轴和y轴上发生转换效果,3D转换:增加了z轴的转换效果

纯css实现星级评分效果

纯css实现超酷炫的星级评分动画效果,实现思路:5个类型为radio的input,label标签修改样式背景图为星星,label标签给每个星星鼠标停留时加注名字,点击星星有放大旋转的动画

css按钮交互效果

是利用了:active和box-shadow两个特性来实现的。希望通过这个简单效果,能让更多的朋友喜欢上css。首先来说一下:active,就是当用户按住一个a标签的时候的意思,鼠标点击下去但没有松开的时候就这样样子啦。

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

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

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