我不明白CSS出了什么问题 [英] I can't understand what's going wrong with my css
本文介绍了我不明白CSS出了什么问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我是Web开发的初学者。
我听不懂...
为什么（#circle）元素出现
当我在（#circle）中添加（transform：rotation（0deg）;）时？
因为据我所知（transform：rotate（0deg）;）可以
我该怎么办？
我在此处和此超链接中也给出了完整的代码...。
var circle = document.getElementById（ circle）
var upbtn = document.getElementById（ upbtn）
var downbtn = document.getElementById（ doenbtn）
var rotationValue = circle.style.transform;
var rotationSum;
upbtn.onclick = function（）
{
rotationSum = rotationValue + rotate（-90deg）;
circle.style.transform = rotationSum;
rotationValue = rotationSum;
}
* {
保证金：0;
填充：0；
}
body {
字体家族：'Gill Sans'，'Gill Sans MT'，Calibri，'Trebuchet MS'，sans-serif；
背景：线性渐变（向右，＃9c27b0，＃8ecdff）；
颜色：#fff;
}
.logo {
display：inline-block;
flex-basis：20％;
z-index：1；
}
.logo img {
width：13vw;
保证金左：1vw;
保证金：1vw;
}
导航{
职位：粘性；
}
.navbar {
float：right;
}
.navbar ul {
display：flex;
列表样式：无；
}
.navbar ul li {
margin-top：1.8vw;
保证金权利：3vw;
}
.navbar ul li a {
文本修饰：无；
颜色：#fff;
}
.info {
z-index：-1;
宽度：60vw；
高度：140vh；
头寸：绝对；
最高：50％；
/ *剩余：-10％； * /
转换：translateY（-50％）;
}
#circle {
宽度：60vw；
高度：140vh；
头寸：绝对；
最高：50％；
转换：translateY（-50％）;
边界半径：50％；
transform：rotation（0deg）;
过渡：全1；
/ * background-color：＃000; * /
}
.feature img {
width：70px;
}
.feature {
位置：绝对；
显示：flex;
颜色：#fff;
}
.feature div {
margin-left：30px;
}
.feature div p {
margin-top：8px;
}
＃f1 {
top：470px;
：50px；
}
＃f2 {
top：200像素；
左：350px；
}
＃f3 {
bottom：430px;
左：50px；
}
＃f4 {
bottom：170px;
：300px；
}
.mobile {
width：200px;
头寸：绝对；
最高：50％；
剩余：35％；
转换：translateY（-50％）;
z-index：2；
}
.controls {
位置：绝对；
最高：50％；
对：10％；
转换：translateY（-50％）;
text-align：center;
}
.controls h3 {
margin：15px 0;
颜色：#fff;
}
#upbtn {
width：15px;
cursor：指针；
}
#downbtn {
width：15px;
cursor：指针；
transform：rotation（180deg）;
}
<！DOCTYPE html>
< html lang = zh-CN>
< 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 =＃>电话< / a>< / li>
< li>< a href =＃>附件< / a>< / li>
< li>< a href =＃>购物车< / 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>相机< / h1>
< p> 32MP，广角镜< / p>
< / div>
< / div>
< div class = feature id = f2>
< h1> \_（ツ）_ /¯< / h1>
< ;!-< img src = / images / resourses / processor.png alt => ->
< div>
< h1>处理器< / h1>
< p> Snapdragon八核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迷你全屏显示< / p>
< / div>
< / div>
< div class = feature id = f4>
< h1> \_（ツ）_ /¯< / h1>
<！-< img src = / images / resourses / battery。 png alt =>->
< div>
< h1> Bettery Life< / h1>
< p> 5000mAh，720小时待机< / p>
< / div>
< / div>
< / div>
< / div>
< div class = controls>
< h1 id = upbtn> ^< / h1>
< ;!-< img src = / images / resourses / arrow.png alt = id = upbtn>->
< h3>功能< / h3>
<！-< img src = / images / resourses / arrow.png alt = id = downbtn>->
< h1 id = downbtn> ^< / h1>
< / div>
< / div>
< / body>
< / html>
解决方案
添加多种变换样式的正确方法。
#circle {
transform：translationY（- 50％）;
transform：rotation（0deg）;
}
正确的方法是添加具有多个值的Transform，这是：
#circle {
transform：平移Y（-50％）旋转（0deg）;
}
I am a beginner to web development.
I am not able to understand...
Why It (#circle) Element goes down When I add (transform: rotate(0deg);) to (#circle)?
because as far as I know (transform: rotate(0deg);) does'nt affect position.
What Should I do?
I've given full code Here and in this Hyperlink also....
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>
解决方案
It is not the correct way to add multiple transform styles.
#circle {
transform: translateY(-50%);
transform: rotate(0deg);
}
The correct way is to add Transform with multiple values is this:
#circle {
transform: translateY(-50%) rotate(0deg);
}
这篇关于我不明白CSS出了什么问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
