前端基础： CSS-3D 为什么dog2转不出角度？

clearwater · 发表于 2020-1-29 12:12

本帖最后由 clearwater 于 2020-1-29 13:03 编辑

我跟着XXX前端视频在学习，做旋转狗。之前跟着视频老师的代码做出来了。现在我复习时，自己写，某代码选择上，比如：老师用的是结构伪类选择器，我用的是属性选择器，但是大框架的思路是一样的。不过我现在自己写时，第二只狗.dog2，转不动角度。

我给狗的父盒子加transform-style, 也加了透视了，权重啥也考虑。然后也对照老师的代码看了好久，都没查出是啥原因。

请大神帮忙看看，哪里写错了？

百度里有照片
链接：https://pan.baidu.com/s/1Mw4kWzYc3hV1Ubo3t6Qzvg
提取码：n7cj

codepen里的代码和下面是一样
https://codepen.io/iwater/pen/WNbBGdo

[HTML] 纯文本查看 复制代码

<!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[class^="dog"] {
            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>

不言谢 · 发表于 2020-1-29 12:57

提示: 作者被禁止或删除内容自动屏蔽

tony666 · 发表于 2020-1-29 13:02

纯外行，感觉是你的perspective太小了，translateZ(200px) 太大了，转完之后，z轴也转了然后移动的时候出去了

clearwater · 发表于 2020-1-29 13:02

不言谢发表于 2020-1-29 12:57
大哥，怎么又是你啊，你的demo 在我编辑器上，还没删了。怎么又来一个。
[mw_shl_code=html,true] body { ...

万分感谢“不言谢” 大神。

1之前的那个是跟着视频老师抄的。问的问题是为啥3D能看到背面。
2现在我是自己写的，完全没看答案。

现在是复习。如果不自己多写，虽然我貌似全都懂了，可是真的要让我写时，我就写不出来。

顺着别人的思路好象啥都是理所当然，只有自己多写写才能发现自己哪没有理解透。

德古拉伯 · 发表于 2020-1-29 13:03

本帖最后由德古拉伯于 2020-1-29 13:05 编辑

转的动啊，我没用图片，是用的背景色
你把persective调到700px明显一点

[HTML] 纯文本查看 复制代码

<!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[class^="dog"] {
            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>

clearwater · 发表于 2020-1-29 13:04

tony666 发表于 2020-1-29 13:02
纯外行，感觉是你的perspective太小了，translateZ(200px) 太大了，转完之后，z轴也转了然后移动的时候出去 ...

非常谢谢托尼大神。

您和不言谢大神都对的。

clearwater · 发表于 2020-1-29 13:08

德古拉伯发表于 2020-1-29 13:03
转的动啊，我没用图片，是用的背景色
你把persective调到700px明显一点
[mw_shl_code=html,true]

谢谢德古大神。

现在手上没有能量了，等有能量给您评分。

~~~~~~~~~~~~~~~~~

后面再回复的大神，只能表示口头感谢，不再一一评分了。

tony666 · 发表于 2020-1-29 13:12

clearwater 发表于 2020-1-29 13:04
非常谢谢托尼大神。

您和不言谢大神都对的。

我是纯菜鸡。。。

clearwater · 发表于 2020-1-29 13:15

tony666 发表于 2020-1-29 13:12
我是纯菜鸡。。。

能帮到我都是神。

才注意到，您还有一个威望，那个不容易呀。仰视！

不言谢 · 发表于 2020-1-29 13:15

提示: 作者被禁止或删除内容自动屏蔽

帐号		自动登录	找回密码
密码			注册[Register]

不言谢不言谢当前离线好友阅读权限 0 听众最后登录 1970-1-1 头像被屏蔽	不言谢发表于 2020-1-29 12:57 提示: 作者被禁止或删除内容自动屏蔽
不言谢不言谢当前离线好友阅读权限 0 听众最后登录 1970-1-1 头像被屏蔽	【吾爱破解论坛总版规】 - [让你充分了解吾爱破解论坛行为规则]
	回复支持举报

不言谢不言谢当前离线好友阅读权限 0 听众最后登录 1970-1-1 头像被屏蔽	不言谢发表于 2020-1-29 13:15 提示: 作者被禁止或删除内容自动屏蔽
不言谢不言谢当前离线好友阅读权限 0 听众最后登录 1970-1-1 头像被屏蔽
	回复支持举报

[已解决] 前端基础： CSS-3D 为什么dog2转不出角度？

免费评分

免费评分