Como criar o mesmo mecanismo de slide do menu do Alura

Olá, Gabriel.

Pra fazer aquela animação você irá utilizar a propriedade transform com o valor de scale e para acontecer tudo animado você usa terá na suas mãos a propriedade transiton. Ah! Para o elemento crescer a partir de uma ponto que você quer, você tem a propriedade transform-origin. Tenta iniciar o código, assim que tiver algo post que eu te ajudo a finalizar :-)

Se não conseguir sair do zero avisa que faça um código de exemplo pra você.

Ola marco vou colocar minha estrutura HTML:

<div class="navegacao-usuario">
                <div class="carrinho">
                    <span class="icon-cart2"></span>
                    <h2 class="titulo-carrinho">meu carrinho(${pedido.quantidade})</h2>
                </div>

                <div class="acesso-principal">
                    <span class="icon-user-circle-o"></span>
                    <h3 class="opcao-acesso">minha conta</h3>
                </div>

                <div class="fale-conosco">
                    <span class="icon-volume-control-phone"></span>
                    <h3 class="nav-fale">fale concosco</h3>
                </div>
            </div>

            <div class="car-user">
                <div class="title-car-user">
                    <p>Meu carrinho</p>
                </div>

                <c:forEach var="prod" items="${pedidoItem}">
                    <div class="prod-car-user">
                        <img src="<c:url value="/${prod.produto.path}"/>">
                        <p>
                            ${prod.produto.descricao} <br>

                            Quantidade: ${pedido.getQuantidade(prod)}
                        </p>
                        <div class="value-car-item">R$ ${pedido.getTotalItem(prod) }</div>                         
                    </div>
                </c:forEach>
                <div class="closed-request-user">
                    <div class="delivery-request">
                        Total(valor sem frete): <strong class="value-delivery">R$ ${pedido.getTotal()}</strong>
                    </div>

                    <div class="button-closed-request">
                        <a href="/rprvidros/carrinho/detalhe">Ver meu carrinho</a>

                        <form action="/rprvidros/confirmacao" method="post">
                            <button class="button-closed" type="submit">
                                Fechar pedido
                            </button>
                            <input type="hidden" name="${_csrf.parameterName }" value="${_csrf.token }"  required/>
                        </form>    
                    </div>
                </div>

            </div>

aqui esta meu css:

.carrinho:hover .car-user{
    box-shadow: 0 0 0 99999px rgba(0,0,0,.8);
    display: flex;
    transition: transform .25s;
    transform-origin: top right;
    visibility: visible;
}

mas ele não aplica efeito algum.

obrigado.