过渡 - 你的形式

Question

我的表单代码显示转换。这是一个出现在网页上的简单表格。

input[type=text], select {
            width: 100%;
            padding: 12px 20px;
            margin: 8px 0;
            display: inline-block;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
        }
        input[type=password], select {
            width: 100%;
            padding: 12px 20px;
            margin: 8px 0;
            display: inline-block;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
        }
        input[type=submit] {
            width: 100%;
            background-color: #4CAF50;
            color: white;
            padding: 14px 20px;
            margin: 8px 0;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        input[type=submit]:hover {
            background-color: black;
        }     
form{margin: 0 auto; 
             width:300px;
             border: 2px solid black;
             background-size:50px; 
             border-radius:12px;
             padding:12px; 
             transition: width 2s, height 2s, transform 2s;
        }
        form:hover{
            width: 400px;
            height: 250px;
            -webkit-transform: rotate(360deg); /* Safari */
            transform: rotate(3600deg);
        }

MY Form在网页上看起来像这样 - 当我将鼠标悬停在它上面时，它会做360度旋转并放大一点。

我想要的是一个说登录的框出现，当我将鼠标悬停在它上面时，登录文本消失并转换为上面的形式。有没有办法做这样的事情。我怎么能这样做？