Set rotation point in css3

What is your question?

Rotation CSS3

1

Application

2

Artificial Intelligence

3

Digital Marketing

4

Physiotherapy

5

Web Technology

Example:

<style> .navigator { position: fixed; margin-top:10px; z-index: 400; } .nav_item{ float: left; width: 30px; cursor: pointer; margin: 0px 7px; } .nav_item_number{ text-align: center; background-color: #b9e9b8; margin: 0px 5px; font-size: 11px; font-weight: bold; padding: 4px; border-radius: 22px; color: #666; box-shadow: inset 0px 0px 13px rgba(0, 0, 0, 0.2); z-index: 303; } .nav_item_txt_container{ position:relative } .nav_item_txt{ position: absolute; top: -19px; left: 15px; width: 185px; -webkit-transform: rotate(-25deg); -webkit-transform-origin: 0% 0%; font-size: 11px; color: #999; padding: 0px 0px 0px 10px; z-index: 301; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nav_item.current .nav_item_number{ background-color: #18A6F8; color: white; cursor: default; box-shadow: inset 0px 0px 0px; position: relative; } .nav_item.current .nav_item_txt{ color: white; background-color: rgba(24, 166, 248, 0.4); font-weight: bold; border-top-right-radius: 10px; border-bottom-right-radius: 10px; padding-top: 1px; height: 15px; margin-top: 1px; margin-left: -3px; } .nav_item:hover .nav_item_txt,.nav_item:hover .nav_item_number{ color: green; } </style> <div id="exampleview"> <div class="navigator" style="display: block;"> <div class="nav_item"> <div class="nav_item_number"> 1 </div> <div class="nav_item_txt_container"> <div class="nav_item_txt"> Application </div> </div> </div> <div class="nav_item"> <div class="nav_item_number"> 2 </div> <div class="nav_item_txt_container"> <div class="nav_item_txt"> Artificial Intelligence </div> </div> </div> <div class="nav_item"> <div class="nav_item_number"> 3 </div> <div class="nav_item_txt_container"> <div class="nav_item_txt"> Digital Marketing </div> </div> </div> <div class="nav_item"> <div class="nav_item_number"> 4 </div> <div class="nav_item_txt_container"> <div class="nav_item_txt"> Physiotherapy </div> </div> </div> <div class="nav_item"> <div class="nav_item_number"> 5 </div> <div class="nav_item_txt_container"> <div class="nav_item_txt">Web Technology </div> </div> </div> </div> </div>

CSS Related Topic's

No topic yet