我不明白CSS出了什么问题

问题描述

我是Web开发的初学者。

我听不懂...

为什么（#circle）元素下降当我向（#circle）添加（transform：rotation（0deg）;）吗？

因为据我所知（转换：rotate（0deg）;）不会影响位置。

我该怎么办？

我在这里和此超级链接中都给出了完整的代码....

var circle = document.getElementById("circle")
var upbtn = document.getElementById("upbtn")
var downbtn = document.getElementById("doenbtn")

var rotateValue = circle.style.transform;
var rotateSum;

upbtn.onclick = function()
{
    rotateSum = rotateValue + "rotate(-90deg)";
    circle.style.transform = rotateSum;
    rotateValue = rotateSum;
}

*{
    margin: 0;
    padding: 0;
}
body{
    font-family: 'Gill Sans','Gill Sans MT',Calibri,'Trebuchet MS',sans-serif;
    background: linear-gradient(to right,#9c27b0,#8ecdff);
    color: #fff;
}

.logo{
    display: inline-block;
    flex-basis: 20%;
    z-index: 1;
}
.logo img{
    width: 13vw;
    margin-left: 1vw;
    margin-top: 1vw;
}
nav{
    position: sticky;
}
.navbar{
    float: right;
}
.navbar ul{
    display: flex;
    list-style: none;
}
.navbar ul li{
    margin-top: 1.8vw;
    margin-right: 3vw;
}
.navbar ul li a{
    text-decoration: none;
    color: #fff;
}
.info{
    z-index: -1;
    width: 60vw;
    height: 140vh;
    position: absolute;
    top: 50%;
    /* left: -10%; */
    transform: translateY(-50%);
}
#circle{
    width: 60vw;
    height: 140vh;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 50%;
    transform: rotate(0deg);
    transition: all 1s;
    /* background-color: #000 ; */
}
.feature img{
    width: 70px;
}
.feature{
    position: absolute;
    display: flex;
    color: #fff;
}
.feature div{
    margin-left: 30px;
}
.feature div p{
    margin-top: 8px;
}
#f1{
    top: 470px;
    right: 50px;
}
#f2{
    top: 200px;
    left: 350px;
}
#f3{
    bottom: 430px;
    left: 50px;
}
#f4{
    bottom: 170px;
    right: 300px;
}

.mobile{
    width: 200px;
    position: absolute;
    top: 50%;
    left: 35%;
    transform: translateY(-50%);
    z-index: 2;
}
.controls{
    position: absolute;
    top: 50%;
    right: 10%;
    transform: translateY(-50%);
    text-align: center;
}
.controls h3{
    margin: 15px 0;
    color: #fff;
}
#upbtn{
    width: 15px;
    cursor: pointer;
}
#downbtn{
    width: 15px;
    cursor: pointer;
    transform: rotate(180deg);
}

<!DOCTYPE html>
<html lang="en">
<head>
    <Meta charset="UTF-8">
    <Meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <script type="text/javascript" src="script.js"></script>
    <title>Real Phone</title>
</head>
<body>
    <div class="wrapper">
        <nav>
        <div class="logo">
            <img src="images/resourses/logo.png" alt="">
        </div>
        <div class="navbar">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Phones</a></li>
                <li><a href="#">Accessories</a></li>
                <li><a href="#">Cart</a></li>
            </ul>
        </div>
        </nav> 
        <div class="info">
            <img src="/images/resourses/mobile.png" alt="" class="mobile">
            <div id="circle">
                <div class="feature" id="f1">
                    <h1>¯\_(ツ)_/¯</h1>
                    <!-- <img src="/images/resourses/camera.png" alt=""> -->
                    <div>
                        <h1>Camera</h1>
                        <p>32MP,Wide Angle Lens</p>
                    </div>
                </div>
                <div class="feature" id="f2">
                    <h1>¯\_(ツ)_/¯</h1>
                    <!-- <img src="/images/resourses/processor.png" alt=""> -->
                    <div>
                        <h1>Processor</h1>
                        <p>Snapdragon Octa-core 11nm</p>
                    </div>
                </div>
                <div class="feature" id="f3">
                    <h1>¯\_(ツ)_/¯</h1>
                    <!-- <img src="/images/resourses/display.png" alt=""> -->
                    <div>
                        <h1>display</h1>
                        <p>6.5" Mini-Drop Fullscreen</p>
                    </div>
                </div>
                <div class="feature" id="f4">
                    <h1>¯\_(ツ)_/¯</h1>
                    <!-- <img src="/images/resourses/battery.png" alt=""> -->
                    <div>
                        <h1>Bettery Life</h1>
                        <p>5000mAh,720hrs Standby</p>
                    </div>
                </div> 
            </div>
        </div>
        <div class="controls">
            <h1 id="upbtn">^</h1>
            <!-- <img src="/images/resourses/arrow.png" alt="" id="upbtn"> -->
            <h3>Features</h3>
            <!-- <img src="/images/resourses/arrow.png" alt="" id="downbtn"> -->
            <h1 id="downbtn">^</h1>
        </div>
    </div>
</body>
</html>

解决方法

这不是添加多种变换样式的正确方法。

#circle {
    transform: translateY(-50%);
    transform: rotate(0deg);
}

正确的方法是添加具有多个值的Transform：

#circle {
   transform: translateY(-50%) rotate(0deg);
}

css-transforms html javascript rotation

我不明白CSS出了什么问题

问题描述

解决方法

相关问答