css3的3d旋转为什么会导致元素变大？ 35
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title></title><style>body{ma...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{margin: 0;}
.box{
position: relative;
margin: 0 auto;
width: 1000px;
-webkit-perspective:1000;
}
ul,li{margin: 0;padding: 0;}
li{list-style: none;}
img{border:0; vertical-align: bottom;}
.box ul{
transition:all .5s linear;
transform-style: preserve-3d;
position: relative;
}
.box ul li{
height: 300px;
overflow: hidden;
transition:all .5s linear;
position: absolute;
width: 1000px;
backface-visibility:hidden;
}
.box ul li:nth-child(1) {
transform:rotate3d(0,0,0,0deg);
background-color: green;
z-index: 2;
}
.box ul li:nth-child(2) {
transform-origin:top;
transform:rotate3d(1,0,0,-90deg);
background-color: pink;
top: 300px;
}
.box:hover ul{
transform:rotate3d(1,0,0,90deg);
}
</style>
</head>
<body>
<div class="box">
<ul>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
这是demo的完整代码，复制到chrome浏览器中就可以运行，哪位大神帮忙看看是什么原因。
鼠标移上去后粉色的长方形会变得很大，这是为什么？ 展开
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{margin: 0;}
.box{
position: relative;
margin: 0 auto;
width: 1000px;
-webkit-perspective:1000;
}
ul,li{margin: 0;padding: 0;}
li{list-style: none;}
img{border:0; vertical-align: bottom;}
.box ul{
transition:all .5s linear;
transform-style: preserve-3d;
position: relative;
}
.box ul li{
height: 300px;
overflow: hidden;
transition:all .5s linear;
position: absolute;
width: 1000px;
backface-visibility:hidden;
}
.box ul li:nth-child(1) {
transform:rotate3d(0,0,0,0deg);
background-color: green;
z-index: 2;
}
.box ul li:nth-child(2) {
transform-origin:top;
transform:rotate3d(1,0,0,-90deg);
background-color: pink;
top: 300px;
}
.box:hover ul{
transform:rotate3d(1,0,0,90deg);
}
</style>
</head>
<body>
<div class="box">
<ul>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
这是demo的完整代码，复制到chrome浏览器中就可以运行，哪位大神帮忙看看是什么原因。
鼠标移上去后粉色的长方形会变得很大，这是为什么？ 展开
展开全部
3d旋转,顾名思义就是立体旋转，涉及到三个轴向，x，y, z，2D旋转只有两个轴向，x，y关键就在z轴呢，我来解释下z轴
z轴就是物体远近，近大远小，所以会使元素看上去会变大，这个是正常的，css3 3D还有个属性就是-webkit-perspective：这个的含义就是景深，就是这个元素离你的眼睛多远，这两个属性有一定的联系，
z轴就是物体远近，近大远小，所以会使元素看上去会变大，这个是正常的，css3 3D还有个属性就是-webkit-perspective：这个的含义就是景深，就是这个元素离你的眼睛多远，这两个属性有一定的联系，
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
2个li标签的位置对于XYZ的3轴交汇点有问题，加上3D视角的作用 所以会变大，你写的时候就改在处理2个li的位置的时候以交互点 也就是正中心的轴点为基础
追问
能帮我指出具体应该修改哪里吗？我想让元素翻转后还处在原来的位置，轴点应该在重心处，但是我不知道哪个地方导致了轴点不对。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
不是元素变大了 而是元素离你更近了， 你可以试着拉远Z轴
顺便推荐你看下3D里面 摄像机的概念
顺便推荐你看下3D里面 摄像机的概念
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
翻转子元素的top值有问题，你的转轴一定要用你用的那么考虑清楚反正后变大问题
追问
为什么top值会影响到大小呢？
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
