Let's say softly I'm not a boch in javascript, but rather I'm a newbie at all ... In general, I don’t really know anything, I tried to make the elements smoothly appear one after another after the page was loaded. But I have no idea how to make a delay of 0.5s and how to change the -ms-transform: rotateY (30deg); on -ms-transform: rotateY (0deg); ... Maybe I'm doing everything wrong and maybe done differently? Here is the code and page styles:

<html> <head> <link rel="stylesheet" type="text/css" href="css/style.css"> <script type="text/javascript"> function Div(){ var message = "myAnyMessage"; function applyNewStyles() { /* операции изменения стилей*/ menu.style["-webkit-transform"] = "rotateY(0deg) !important"; } doApplyNew = function(e) { if (e.data === message && e.source === window) { window.removeEventListener('message', doApplyTo, false); applyNewStyles(); } }; window.addEventListener('message', doApplyNew, false); window.postMessage(message, '*'); var W=window.innerWidth - 200; var H=window.innerHeight - 50; document.getElementById('Content').style.height=H+"px"; document.getElementById('Content').style.width=W+"px"; document.getElementById('Content').style.opacity=1; document.getElementById('SidebarLeft').style.height=H+"px"; document.getElementById('SidebarLeft').style.opacity=1; document.getElementById('SidebarLeft').style.left=0; document.getElementById('Head').style.opacity=1; document.getElementById('Head').style.top=0; document.getElementById('menu').style["-webkit-transform"] = "rotateY(0deg) !important"; } function right(){ var W=window.innerWidth - 200; var H=window.innerHeight - 50; var Content=document.getElementById('Content'); Content.style.height=H+"px"; Content.style.width=W+"px"; document.getElementById('SidebarLeft').style.height=H+"px"; } </script> </head> <body onLoad="Div()"> <div id='Head'> </div> <div id='SidebarLeft'> <div id='wrapper'> <div id='Menu'> Меню </div> </div> </div> <div id='Content'> <div> </div> </div> </body> </html> input, textarea {outline:none;} body { width: 100%; height: 100%; margin: 0; padding: 0; border: 0; background: #fff; background: fixed #fff url(../images/bg.jpg) center center no-repeat; text-decoration: none; font-family: "helvetica neue", helvetica, arial, sans-serif; font-size: 12px; overflow: hidden; -webkit-perspective: 100%; } ::-webkit-scrollbar { width: 10px; } ::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.1); } ::-webkit-scrollbar-thumb { background: rgba(255, 0, 0, 0.8); } ::-webkit-scrollbar-thumb:window-inactive { background: rgba(255, 255, 255, 0.4); } #Content, #head, #SidebarLeft { -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -o-transition: all .5s ease; -ms-transition: all .5s ease; transition: all .5s ease; } #head { width: 100%; height: 50px; position: absolute; top: -50px; float: left; opacity: 0; background: rgba(0,132,255,.9); } #Content { width: 0; position: absolute; right: 0; bottom: 0; opacity: 0; background: rgba(0,0,0,0.7); overflow-x: hidden; overflow-y: scroll; } #SidebarLeft { width: 200px; height: 100%; position: absolute; left: -200px; bottom: 0; float: left; opacity: 0; background: rgba(255,255,255,0.9); } #wrapper { width: 200px; height: 30PX; -webkit-perspective: 200px; } #menu { width: 200px; height: 30px; margin: 0 0; float: left; opacity: 1; background: rgba(0,0,0,0.9); transform:rotateY(30deg); -o-transform:rotateY(30deg); -webkit-transform:rotateY(115deg); -moz-transform:rotateY(30deg); -ms-transform:rotateY(30deg); -webkit-transition: all .5s ease; -moz-transition: all .5s ease; -o-transition: all .5s ease; -ms-transition: all .5s ease; transition: all .5s ease; -webkit-transform-origin: left center; }

    1 answer 1

    Well I say, it is necessary to consider the register!

     <body onLoad="Div()">

    onLoad small need to write! Plus, what else I said: you need to specify the transformation styles NOT in CSS. In your case, the code will be more complicated, which no one needs.

    And of course you will fail because you just put on some of my advice. Suppose you have not done so that the desired function for changing the style of transformation is carried out in half a second. To do this, you just had to find the corresponding function in setTimeout in Google.

     menu.style["-webkit-transform"] = "rotateY(0deg) !important";

    Here "menu" is a link to the html object

     menu = document.getElementById('Menu'); //!!! В HTML у вас Menu c большой буквы, стало быть, надо и тут писать! //Посмотрите что у вас в примере.

    I also did not see that you call the function right. It is dead in the code.

    In general, I pointed out a couple of mistakes to you, and no one else will do anything for you. So go ahead! Try, learn, read the theory.

    I also advise writing functions and id objects in small letters.

    • Not understood. Where do I specify the styles if not in the css? - Kirpich643 2:42
    • Well you what is it so? :) The html tag has a parameter "style". There and make! For example, "style = 'color: red;'" - Anton Mukhin
    • Understood thanks :) - Kirpich643