css3的perspective或者transform:tanslateZ没有效果

现在css学习到了3D效果了,今天跟着教程学习到了旋转,结果发现我的 perspective没有效果,反复检查了代码也没有问题,后来想着再往后做做,看看情况,做到第二个图片的时候,发现确实是效果没出来,去搜了一下perspective的效果不显示怎么办,说是要加style,可是我已经加了没有用,也试过关闭软件重新启动等方法,也没有查到合适的

以下是我遇到问题的运行后的图

css3的perspective或者transform:tanslateZ没有效果_第1张图片

没有3D效果

再后来试着改改translateZ看看有没有反应,发现没有,这个时候再去查,就好查很多了,说是要加transform-style: preserve-3d,要注意不能和overflow: hidden同时出现,否则效果将失效,我先检查了一下,两个都没有加,现在就是位置的问题,首先要注意得放在父级,我先放在body里没有效果,后来属实找不到位置就每个都放了一下,找到了,也就解决问题了

css3的perspective或者transform:tanslateZ没有效果_第2张图片

效果出来了

css3的perspective或者transform:tanslateZ没有效果_第3张图片

其他的都不行,重新整理了一下

css3的perspective或者transform:tanslateZ没有效果_第4张图片





    
    
    
    Document
    




    

你可能感兴趣的:(css3,css,html5)