Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS How can I fix a side of an element when i made it moving after rotate it ??

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #202954
    Wail Ashraf
    Participant

    Hay there I’m returned .
    I made a line and i rotate it and i moved it ;
    so when it’s move it’s moving a by the two sides ,
    Can anyone tell me how can i fix a one of it sides ?
    This is the HTML code :

    <div1> </div1>

    And the CSS code :

    div1 {
    display: inline-block;
    width: 40px;
    height: 3px;
    position : absolute;
    left : 574px;
    top: 115.6px;
    background: black;
    border-radius: 50px;
    -webkit-animation: loader 15s alternate;
    transition:margin-left 1s;
    -webkit-transform:rotate(70deg);
    transition: div width 9s;
    }
    @-webkit-keyframes loader {
    0% {
    width: 0px;
    height: 3px;
    opacity: 1;
    -webkit-transform: translateY(90);
    background:whit
    }

    50% {
    background:whit
    }

    100% {
    width: 40px;
    height: 3px;
    opacity: 1;
    margin-top:10px;
    margin-left:-10px;

    }
    }

    .

    #202955
    Paulie_D
    Member

    Please make a Codepen Demo rather than just copy code into your question.

    It will help us see what the problem is and may help you narrow down the issue.

    I can see at a quick glance that you have many errors and typos in your existing code.

    #202956
    nkrisc
    Participant

    Unfortunately humans don’t have the same rendering engines as browsers and can not see an issue by reading code and rendering it in their head.

    If you make a codepen showing the issue using the code you provided it’ll be easier for others to help you.

    #202957
    Wail Ashraf
    Participant

    Sorry but I can’t insert it into code pen because my internet connection is very bad and there is not any strong connect in my city ( “We are in a war”) because ISIS :(

    #202958
    Paulie_D
    Member

    If you post here, you can use Codepen.

    However, if you ‘re open to suggestions.

    First, validate your HTML & CSS.

    Second, don’t start at the end.

    Animate one property…if that works, add the next one to the animation and repeat the testing…do that until the animation runs as expected.

    So the same for the transitions…transition one property, if that works, add the next.

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.