css - translateZ表现问题?
问题描述
<!DOCTYPE html><html><head><style>body { padding: 100px; -webkit-perspective:200px;-webkit-transform-style:preserve-3d; }img { -webkit-transform:translateZ(0);-webkit-transition:5s ease all; width: 100px; height: 150px;}img:hover { -webkit-transform:translateZ(-500px); }</style></head><body><img src='https://www.haobala.com/wenda/img/1.jpg'></body></html>
我按照视频里的一字不差的写下来,为什么表现形式是飞到了九霄云外而不是以图形中心为基点放大?求助万能的SF。。。
问题解答
回答1:以图形为中心放大是scale吧
回答2:你这段css代码是达不到你的需求的。以图形中心(设置基点):-webkit-transform-origin: XX XX;这个属性是设置旋转元素的基点位置放大:-webkit-transform: scale();
回答3:-webkit-transform:translateZ(-500px);是直接在z轴方向的平移。。。
回答4:谢邀!我在你代码的基础上修改了一下。demo你是要的这种效果吗?你可以看一下以下两篇文章,对你会有所帮助。CSS3详解:transformCSS3 3D transform变换
注意我demo虽然已经给你标注了,但是还是想提醒一下scale(2.0)2.0为要变化的元素的二倍。
相关文章:
1. android-studio - android studio自带模拟器中的本地“图库”所对应的路径是什么?2. 【python小白】 问关于property的顺序问题3. angular.js - angular1如何使用跨域后的得到的数据4. angular.js - 如何在指令里使用ng-click5. angular.js input输入正确数据框变红色6. JS怎么给每相隔一行的TD添加filter滤镜?7. flexbox - css3[flex-shrink]属性在子项有 padding/box-sizing 属性时,是如何计算子项宽度的?8. android-studio - Android Studio 中有没有类似C#的#if DEBUG功能9. 9.png中在同一方向上设置多个拉伸位置,在android studio中怎么弄出来?10. angular.js - Angular 像这种重复判断的表达式 有什么好的解决办法吗?~