Navegação Circular com CSS Transforms

htmlCopy code
<div class="container">
    <div class="central-item">Centraldiv>
    <ul class="navigation">
        <li><a href="#home">Homea>li>
        <li><a href="#about">Sobrea>li>
        <li><a href="#services">Serviçosa>li>
        <li><a href="#portfolio">Portfólioa>li>
        <li><a href="#contact">Contatoa>li>
    ul>
div>

2. Estilo CSS Básico:

Agora, vamos adicionar algum estilo básico para posicionar os elementos na página e definir sua aparência.

cssCopy code
.container {
    position: relative;
    width: 500px; /* Ajuste conforme necessário */
    margin: 100px auto;
    text-align: center;
}

.central-item {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #f00; /* Cor de fundo do elemento central */
    padding: 20px;
    border-radius: 50%; /* Para torná-lo um círculo */
    color: #fff; /* Cor do texto */
}

.navigation {
    list-style: none;
    padding: 0;
    margin: 0;
}

.navigation li {
    display: inline-block;
    margin: 0 20px; /* Espaçamento entre os itens de navegação */
}

.navigation li a {
    text-decoration: none;
    color: #000; /* Cor do texto dos itens de navegação */
    transition: color 0.3s ease; /* Transição suave para a cor do texto */
}

.navigation li a:hover {
    color: #f00; /* Cor do texto dos itens de navegação ao passar o mouse */
}

3. Aplicação do Efeito Circular com CSS Transforms:

Agora vem a parte interessante – aplicar transformações CSS para posicionar os itens de navegação em torno do elemento central, criando assim a navegação circular.

cssCopy code
.navigation li {
    display: inline-block;
    margin: 0;
    position: absolute;
    transform-origin: 50% 0; /* O ponto de origem das transformações */
}

.navigation li:nth-child(1) { transform: rotate(0deg) translate(150px) rotate(0deg); }
.navigation li:nth-child(2) { transform: rotate(72deg) translate(150px) rotate(-72deg); }
.navigation li:nth-child(3) { transform: rotate(144deg) translate(150px) rotate(-144deg); }
.navigation li:nth-child(4) { transform: rotate(216deg) translate(150px) rotate(-216deg); }
.navigation li:nth-child(5) { transform: rotate(288deg) translate(150px) rotate(-288deg); }

4. Adicionando Interatividade:

Para tornar a navegação mais interativa, podemos adicionar transições suaves nos itens ao passar o mouse sobre eles.

cssCopy code
.navigation li a {
    text-decoration: none;
    color: #000; /* Cor do texto dos itens de navegação */
    transition: color 0.3s ease; /* Transição suave para a cor do texto */
    display: block; /* Faz com que o link preencha todo o espaço do item */
    padding: 10px; /* Adiciona um espaço clicável em torno do texto */
}

.navigation li a:hover {
    color: #f00; /* Cor do texto dos itens de navegação ao passar o mouse */
}

Conclusão:

Ao seguir esses passos, você criará uma elegante e funcional navegação circular usando CSS Transforms. Lembre-se de ajustar os valores de tamanho, cor e posição de acordo com o design e as necessidades específicas do seu site. Este método proporciona uma experiência de usuário única e pode ser uma adição impressionante ao seu projeto web.