关于9-10 3d旋转导航

请问任务六里的transform: translatez(-25px);和任务五里的transform: translateZ(-25px) rotateX(90deg);具体是怎么操作的。

慕丝9335528

2017-08-06

源自：十天精通CSS3 9-10

关注问题我要回答

1231

操作

收起

1 回答

言吖头回答被采纳 +2 积分
2017-08-12

transform: translatez(-25px);向z轴的负方向移动25px；transform: translateZ(-25px) rotateX(90deg);移动的同时翻转60度

0 回复有任何疑惑可以回复我~

收起回答

慕丝9335528 提问者

这个我知道，但我当时放到源码里的时候，和整个过程对应不起来，总感觉其中有一个移动是多余的。。。

2017-08-17 回复有任何疑惑可以回复我~

爱上慕婉清6262634 回复慕丝9335528 提问者

先说下核心吧，这两个是为了让元素回到原来位置的。 1.任务六里面那个是未触发hover和focus时原始状态，在任务七里进行布局的时候，将两个span在z轴上向正方向移动25像素，为了保证布局合理，在任务六里让他们回到原来位置。所以给任务六一个在z轴负方向的25像素。这样无动态时的布局就完成了。（任务六模块是任务七的父级，所以可以这么搞） 2.任务五里面触发hover时，元素有一个rotateX(90deg)，触发这个后元素实际位置已经在z轴上向正方向移动25像素；所以在任务五里面又给个-25px让它回到原位。

2017-10-11 回复有任何疑惑可以回复我~

0/150

提交

取消

十天精通CSS3

参与学习 242635 人
解答问题 2623 个

本课程为CSS3入门教程，深刻详解CSS3知识让网页穿上绚丽装备

进入课程

本课相似问答

2 回答制作3D旋转导航综合练习题

2 回答css3导航3d

5 回答关于旋转问题

1 回答关于旋转提问rotate

2 回答制作3D旋转导航综合练习题这节，class的属性名为什么会带空格？这样写是什么意思？

搜索更多本课相关问答

关于9-10 3d旋转导航

我要回答关注问题

热搜

最近搜索清空

关于9-10 3d旋转导航

1 回答

本课相似问答

关于9-10 3d旋转导航