前端基础： CSS-3D 为什么dog2转不出角度？
本帖最后由 clearwater 于 2020-1-29 13:03 编辑我跟着XXX前端视频在学习，做旋转狗。之前跟着视频老师的代码做出来了。现在我复习时，自己写，某代码选择上，比如：老师用的是结构伪类选择器，我用的是属性选择器，但是大框架的思路是一样的。不过我现在自己写时，第二只狗.dog2，转不动角度。
我给狗的父盒子加transform-style, 也加了透视了，权重啥也考虑。然后也对照老师的代码看了好久，都没查出是啥原因。
请大神帮忙看看，哪里写错了？
百度里有照片
链接：https://pan.baidu.com/s/1Mw4kWzYc3hV1Ubo3t6Qzvg
提取码：n7cj
codepen里的代码和下面是一样
https://codepen.io/iwater/pen/WNbBGdo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
perspective: 400px;
}
.box {
position: relative;
width: 300px;
height: 200px;
margin: 200px auto;
transform-style: preserve-3d;
}
div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: pink;
background: url(media/dog.jpg);
}
div.dog1 {
transform: rotateY(0) translateZ(200px);
}
div.dog2 {
transform: rotateY(60deg) translateZ(200px);
}
</style>
</head>
<body>
<div class="box">
<div class="dog1"></div>
<div class="dog2"></div>
<div class="dog3"></div>
<div class="dog4"></div>
<div class="dog5"></div>
<div class="dog6"></div>
</div>
</body>
</html> 纯外行，感觉是你的perspective太小了，translateZ(200px) 太大了，转完之后，z轴也转了然后移动的时候出去了
不言谢 发表于 2020-1-29 12:57
大哥，怎么又是你啊，你的demo 在我编辑器上，还没删了。怎么又来一个。
body { ...
万分感谢“不言谢” 大神。
1之前的那个是跟着视频老师抄的。问的问题是为啥3D能看到背面。
2现在我是自己写的，完全没看答案。
现在是复习。如果不自己多写，虽然我貌似全都懂了，可是真的要让我写时，我就写不出来。
顺着别人的思路好象啥都是理所当然，只有自己多写写才能发现自己哪没有理解透。 本帖最后由 德古拉伯 于 2020-1-29 13:05 编辑
转的动啊，我没用图片，是用的背景色
你把persective调到700px明显一点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body {
perspective: 400px;
}
.box {
position: relative;
width: 300px;
height: 200px;
margin: 200px auto;
transform-style: preserve-3d;
}
div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: pink;
background: url(media/dog.jpg);
}
div.dog1 {
transform: rotateY(0) translateZ(200px);
background-color: pink;
}
div.dog2 {
transform: rotateY(60deg) translateZ(200px);
background-color: skyblue;
width: 400px;
}
</style>
</head>
<body>
<div class="box">
<div class="dog1"></div>
<div class="dog2"></div>
<div class="dog3"></div>
<div class="dog4"></div>
<div class="dog5"></div>
<div class="dog6"></div>
</div>
</body>
</html> tony666 发表于 2020-1-29 13:02
纯外行，感觉是你的perspective太小了，translateZ(200px) 太大了，转完之后，z轴也转了然后移动的时候出去 ...
非常谢谢托尼大神。
您和不言谢大神都对的。 德古拉伯 发表于 2020-1-29 13:03
转的动啊，我没用图片，是用的背景色
你把persective调到700px明显一点
谢谢德古大神。
现在手上没有能量了，等有能量给您评分。
~~~~~~~~~~~~~~~~~
后面再回复的大神，只能表示口头感谢，不再一一评分了。 clearwater 发表于 2020-1-29 13:04
非常谢谢托尼大神。
您和不言谢大神都对的。
我是纯菜鸡。。。 tony666 发表于 2020-1-29 13:12
我是纯菜鸡。。。
能帮到我都是神。
才注意到，您还有一个威望，那个不容易呀。仰视！
{:1_921:}{:1_893:}
页:
[1]
2