文章详情页
css - translateZ表现问题？
浏览：289日期：2023-07-05 11:31:31
问题描述
<!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为要变化的元素的二倍。
标签：
CSS
相关文章：
1. python - 求一个在def中可以实现调用本def满足特定条件continue效果的方法（标题说不太清楚，请见题内描述）2. $fields = $values = [];这条代码一直定义不了，一直报错，老师的源码也是被报错的,执行不了,请问该怎么解决这个问题3. USE关键字4. javascript - mysql插入数据时怎样避免与库中的数据重复？5. MySQL 这句 创建表结构语句的错误在哪？6. 导入phpmyadmin的时候报错了7. MySQL能否给某个字段的值设置有效期？8. 求一个mySQL安装包9. mysql数据库做关联一般用id还是用户名10. MySQL 如何 SELECT 除去某一列的所有列？
排行榜
![$fields = $values = [];这条代码一直定义不了，一直报错，老师的源码也是被报错的,执行不了,请问该怎么解决这个问题](http://www.haobala.com/attached/image/news/202205/093622cb60.png)
网公网安备