Home>

http://coscos.me/

I want to make the same one that has position: fixed at the bottom right of this site.

I couldn't find it by Google search, so I tried my best on my own.

Looking at the developer tools,
1 First, arrange the letters on a circle (arch shape),
2 Turn it around

It looked like.

First, I was able to arrange the letters in an arch, but I couldn't fix and rotate them.

I will post the code so far.

If i know something, or if i am familiar with css3, please teach.

<! DOCTYPE html><html><head><style>  .section1-clock {
      position: absolute;
      top: 50vh;
      right: 50vw;
    }
    .section1-clock-inner {
      position: relative;
      width: 100px;
      height: 100px;
      transform-origin: 0 50%;
      animation: rotation 1.5s linear infinite;
    }
    .section1-clock span {
        font-size: 10px;
        height: 100px;
        position: absolute;
        color: black;
        width: 20px;
        transform-origin: bottom center;
        }
      .char1 {transform: rotate (-38deg);}
      .char2 {transform: rotate (-34deg);}
      .char3 {transform: rotate (-29deg);}
      .char4 {transform: rotate (-25deg);}
      .char5 {transform: rotate (-22deg);}
      .char6 {transform: rotate (-18deg);}
      .char7 {transform: rotate (-14deg);}
      .char8 {transform: rotate (-10deg);}
      .char9 {transform: rotate (-6deg);}
      .char10 {transform: rotate (-1deg);}
      .char11 {transform: rotate (2deg);}
      .char12 {transform: rotate (6deg);}
      .char13 {transform: rotate (12deg);}
      .char14 {transform: rotate (17deg);}
      .char15 {transform: rotate (18deg);}
      .char16 {transform: rotate (22deg);}
      .char17 {transform: rotate (26deg);}
      .char18 {transform: rotate (30deg);}
      .char19 {transform: rotate (34deg);}
      .char20 {transform: rotate (38deg);}
      .char21 {transform: rotate (42deg);}
      .char22 {transform: rotate (46deg);}
      .char23 {transform: rotate (47deg);}
      .char24 {transform: rotate (85deg);}
      .char25 {transform: rotate (89deg);}
      .char26 {transform: rotate (93deg);}
      .char27 {transform: rotate (97deg);}
      .char28 {transform: rotate (101deg);}
      .char29 {transform: rotate (105deg);}
      .char30 {transform: rotate (109deg);}
      .char31 {transform: rotate (113deg);}.char32 {transform: rotate (117deg);}
      .char33 {transform: rotate (121deg);}
      .char34 {transform: rotate (125deg);}
      .char35 {transform: rotate (129deg);}
      .char36 {transform: rotate (133deg);}
      .char37 {transform: rotate (37deg);}
      .char38 {transform: rotate (141deg);}
      .char39 {transform: rotate (145deg);}
      .char40 {transform: rotate (149deg);}
      .char41 {transform: rotate (153deg);}
      .char42 {transform: rotate (157deg);}
      .char43 {transform: rotate (161deg);}
      .char44 {transform: rotate (165deg);}
      .char45 {transform: rotate (169deg);}
      .char46 {transform: rotate (173deg);}
      .char47 {transform: rotate (208deg);}
      .char48 {transform: rotate (212deg);}
      .char49 {transform: rotate (216deg);}
      .char50 {transform: rotate (220deg);}
      .char51 {transform: rotate (224deg);}
      .char52 {transform: rotate (228deg);}
      .char53 {transform: rotate (232deg);}
      .char54 {transform: rotate (236deg);}
      .char55 {transform: rotate (240deg);}
      .char56 {transform: rotate (244deg);}
      .char57 {transform: rotate (248deg);}
      .char58 {transform: rotate (252deg);}
      .char59 {transform: rotate (256deg);}
      .char60 {transform: rotate (260deg);}
      .char61 {transform: rotate (264deg);}
      .char62 {transform: rotate (268deg);}
      .char63 {transform: rotate (272deg);}
      .char64 {transform: rotate (276deg);}
      .char65 {transform: rotate (280deg);}
      .char66 {transform: rotate (284deg);}
      .char67 {transform: rotate (288deg);}
      .char68 {transform: rotate (292deg);}
      .char69 {transform: rotate (296deg);}
      @keyframes rotation {
          0% {
          }
          100% {
              transform: rotate (360deg);
          }
      }
  }
</style></head><body>                    <span>F</span>      <span>O</span>      <span>L</span>      <span>L</span>      <span>O</span>      <span>W</span>      <span></span>      <span>T</span>      <span>H</span>      <span>E</span>      <span></span>      <span>W</span>      <span>H</span>      <span>I</span><span>T</span>      <span>E</span>      <span></span>      <span>R</span>      <span>A</span>      <span>B</span>      <span>B</span>      <span>I</span>      <span>T</span>      <span>F</span>      <span>O</span>      <span>L</span>      <span>L</span>      <span>O</span>      <span>W</span>      <span></span>      <span>T</span>      <span>H</span>      <span>E</span>      <span></span>      <span>W</span>      <span>H</span>      <span>I</span>      <span>T</span>      <span>E</span>      <span></span>      <span>R</span>      <span>A</span>      <span>B</span>      <span>B</span>      <span>I</span>      <span>T</span>      <span></span>      <span></span>      <span>F</span>      <span>O</span>      <span>L</span>      <span>L</span>      <span>O</span>      <span>W</span>      <span></span>      <span>T</span>      <span>H</span>      <span>E</span>      <span></span>      <span>W</span>      <span>H</span>      <span>I</span>      <span>T</span>      <span>E</span>      <span></span>      <span>R</span>      <span>A</span>      <span>B</span>      <span>B</span>      <span>I</span>      <span>T</span>      <span></span>      <span></span>            <!--></body></html>
  • Answer # 1

    The link destination is an arched text that uses an image.

    The reason why the rotation is not fixed with the presented code is that the center of rotation is off.

    transform-originShould be set at the bottom left.

        .section1-clock-inner {
            position: relative;
            width: 100px;
            height: 100px;
            transform-origin: left bottom;/* fix * /
            animation: rotation 5s linear infinite;
          }
          .section1-clock span {
            font-size: 10px;
            height: 100px;
            position: absolute;
            color: black;
            width: 20px;
            transform-origin: left bottom;/* fix * /
          }

    CodePen sample