What is the best way to keep the rotateblock within the designated section boundaries?

Issue: The blue block is getting out of the section due to the transform property set as rotate. How can this be resolved?

https://i.sstatic.net/F0exR.png

section {
  padding: 10px 0 40px;
  background: #ececec;
  height: 1600px;
}

.filter {
  display: inline-block;
font-size: 16px;
color: white;
background: blue;
position: sticky;
left: 0;
top: 50%;
transform: translate(-44%, -50%) rotate(-89deg);
padding: 6px 54px;
}
Lorem ipsum dolor sit amet consectetur adipisicing elit ... lipstickisicing.

javascripthtmlcss

Answer №1

Filter content
section { padding: 10px 0 40px; background: #ececec; height: 1600px; } .filter { display: inline-block; font-size: 16px; color: white; background: blue; position: sticky; left: 0; top: 50%; margin-bottom:70px; transform: translate(-44%, 160%) rotate(-89deg); padding: 6px 54px; }

Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam eius mollitia corrupti...

Answer №2

Give this a shot.

section {
  padding: 10px 0 40px;
  background: #ececec;
  height: 1600px;
}

.filter {
    display: inline-block;
    font-size: 16px;
    color: white;
    background: blue;
    padding: 10px 6px;
    vertical-align: middle;
    text-align: center;
    writing-mode: tb;
    height: 160px;
    box-sizing: border-box;
    position: sticky;
    left: 0;
    top: calc(50% - 80px);
    transform: rotate(180deg);
}
Lorem ipsum dolor sit amet consectetur adipisicing elit. Numquam eius mollitia corrupti. Consequuntur excepturi cum quia soluta iste unde fugiat adipisci, eligendi vitae? Tenetur velit debitis assumenda quos esse minus incidunt iste animi laborum porro voluptate quasi commodi, sapiente quod. Est dicta qui suscipit animi dignissimos ipsam deserunt, libero similique assumenda voluptas facere quis provident, adipisci culpa atque earum aperiam non itaque repellendus alias harum iure perferendis voluptates? Consequuntur veritatis pariatur sit in illum, ea mollitia culpa error dolore temporibus magnam repellendus deserunt magni repudiandae dolor odit praesentium. Ad excepturi unde omnis...

<section>
  <a href="#filter" class="filter">
    Filter
  </a>
  content
</section>

<div>
  Lorem ipsum, dolor sit amet consectetur adipisicing elit. Alias ab tempore sint doloremque cum harum facere dicta repellat totam animi? Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis sequi dignissimos quos maxime corporis vel beatae laborum architecto consequuntur. Impedit deleniti libero rem corporis possimus? Nisi maxime atque tempora veritatis magnam. Temporibus aperiam ducimus voluptatum vitae tenetur saepe, inventore quibusdam! Ipsam molestiae dolores itaque reprehenderit? Repudiandae tempora enim accusantium error modi sequi dolorum dolorem, magni molestias harum. Perspiciatis cum debitis tempore ex, magnam autem accusantium volupt...

Dolorum ex, natus quo qui repudiandae totam. Laboriosam delectus odit sequi esse enim corrupti! Sunt, ab! Accusantium laborum ea aspernatur possimus inventore dolorum iure nesciunt ullam ratione deleniti, corrupti, molestiae fugiat, quidem id ab voluptates nobis dolore. Doloremque facilis voluptatibus corrupti quam cupiditate obcaecati tenetur quo excepturi a suscipit aliquam, commodi deserunt nulla nobis dolor, est autem enim vero possimus accusamus esse beata..."

Answer №3

To achieve the desired effect, it is important to put the rotation before the transform and specify the origin of rotation with:

transform-origin: top left;

This declaration will determine the point around which the element will rotate. Here's an adjusted snippet with a change from -89 to -90 for a precise positioning parallel to the viewport's left side. Additionally, to ensure that the sticky element does not extend past the content div at the bottom, you can include:

margin-bottom: 13%;


section {
  padding: 10px 0 40px;
  background: #ececec;
  height: 1600px;
}

.filter {
  display: inline-block;
font-size: 16px;
color: white;
background: blue;
position: sticky;
left: 0;
top: 0%;
transform: rotate(-90deg) translateX(-100%) ;
  transform-origin: top left;
padding: 6px 54px;
  margin-bottom: 13%;
}
[Content]

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to fetch data from node.js using Ajax?

I'm currently trying to grasp the concept of sending and receiving data between Ajax and node.js. While I have been successful in sending the data from Ajax, I am facing difficulties in receiving it on the node.js end. Despite my efforts, I haven&apos ...

javascriptjquerynode.jsajax

Is there a built-in way to update a Django template from the server side in response to an event?

As a novice Django developer, my task is to create an auction website. I need to enhance the template that displays item listings and bids, ensuring that the latest bids are updated in real-time without the need for users to refresh the page. While consid ...

javascriptjquerypythondjangopython-3.x

Formatting code within an HTML document

I am attempting to customize a stock widget that I obtained from financialcontent.com. My current approach involves using Bootstrap for styling purposes. To incorporate the widget into a div, I found it necessary to embed the script directly within the HT ...

javascripthtmlcsstwitter-bootstrapweb

Creating a TypeScript generic type for the "pick" function to define the types of values in the resulting object

I am facing an issue while writing the type for the pick function. Everything works smoothly when picking only one key or multiple keys with values of the same type. However, if I attempt to pick a few keys and their values are of different types, I encoun ...

javascripttypescripttypesgeneric-type-argument

The continuous loop is triggered when attempting to pass array data from the API

Hello, I have been searching for a solution to my current issue without much success. The problem revolves around retrieving dates from Firebase and populating them into UI elements in my Vue app. My end goal is to align each date with the corresponding mo ...

javascriptfirebasevue.jsgoogle-cloud-firestore

Struggling with aligning elements using CSS? Let me assist

I have been working on creating circle cards using HTML and CSS. I have successfully managed to make the cards clickable to open a web URL. However, I am facing issues with aligning the elements properly on the page. I attempted using display: flex to pl ...

htmlcssflexbox

What is the process to set a Woocommerce checkout field as optional when a checkbox is marked?

I need assistance with customizing the checkout page on Wordpress Woocommerce. Specifically, I want to make the field 'billing_name' not required if the checkbox 'buy_on_company' is checked. Currently, I have successfully hidden ' ...

javascriptphphtmlwoocommerce

having difficulty implementing the blur effect in reactJS

Currently, I am working on developing a login page for my project. Below is the code snippet I have implemented for the functionality: import React, { useState, createRef } from "react"; import { Spinner } from "react-bootstrap"; import ...

javascriptcssreactjs

Error: The object 'exports' is not defined in geotiff.js at line 3

Looking to integrate the geotiff library with Angular 6.1.0 and TypeScript 2.9.2. Installed it using npm i geotiff Encountering the following error in the browser console: Uncaught ReferenceError: exports is not defined at geotiff.js:3 After r ...

javascriptangulartypescript

What is the ideal method for releasing a WebAssembly library on the npm registry?

Is there a recommended approach to publishing a library utilizing a wasm binary on npm? During my attempts, I've come across several challenges. My ideal scenario would involve: A process that is completely transparent to the user. Users should b ...

javascriptnpmpackagewebassembly

What is causing the turn.js demo to not function properly?

I tested the demo script on fiddle as recommended in the official docs. Upon downloading the script and trying to run it in my browser, I encountered a problem where it did not work, and no errors were displayed on the console. Curiously, when I ran the ...

javascriptjqueryhtmlcssturnjs

Task with Gulp: Utilizing Streams within a Loop

The objective is to read all the files stored in someFolder and inject them into a specific file using gulp-inject-string with an irrelevant condition for this context. Below is some pseudo code illustrating what I currently have: var gulp = require(&a ...

javascriptnode.jsgulp

What is the typical method for preserving a specific gap between two lines when the line spacing surpasses the margin?

My workplace provided me with a wireframe that looks like this: https://i.sstatic.net/Qumru.png Description of the image above: Maintain a margin of 10px between the lines and utilize the specified css class .font16. This is what the .font16 class conta ...

htmlcssmarginline-height

Preserving chosen options in a dropdown menu using PHP and HTML

I'm facing an issue with my code where the selected values in a dropdown menu revert back to default every time the page refreshes. How can I ensure that the selected values remain unchanged? Unfortunately, I am unable to utilize AJAX as per the user ...

phphtml

Sorting through a collection by using a nested array

I've been working on optimizing my code to prevent making new http requests to my API every time I need to filter results. Currently, I have an array called pageContent that is populated with data from an API fetch when the page loads. Each object in ...

javascriptvue.js

Transmitting Data to PHP Using JQuery/AJAX

I'm struggling with this issue. Here is the HTML code that I have: <input type="text" class="studno"><input type="button" value="Check" class="chstudno"> How can I send this data to PHP using JQuery/AJAX? Below is the code that I current ...

jqueryhtmlajax

Is it feasible to modify state within the map function in React, and if not, what other approach can be taken instead?

For my April calendar project, I'm organizing 30 day squares. this.state = { myArray: [1, 2, ...30], count: 1 }; render () { return <div>{this.state.myArray.map(() => ( <div className='daySquare'> ...

javascriptreactjs

Personalize the appearance of a component using React Bootstrap styling

I am looking to customize the default style of a react-bootstrap component. For instance, when using the Panel component, I would like to make the title bold. How can I accomplish this without losing the default styles of a "warning" panel when using bsCl ...

csstwitter-bootstrapreactjscustomization

CSS: Can pseudo elements be combined with the plus sign?

When looking at the markup below: <div> <p>hello world</p> </div> <div> <h4>hello world</h4> </div> Is it possible to achieve the following styling using CSS: div:after { content: ""; display ...

csscss-selectorspseudo-element

Online collection-based game

This is my first attempt at creating a web-based game and I have some questions about the necessary technologies. Specifically, I want to enable users to gather items and save their progress within the game. Currently, I am focusing on mastering HTML, CS ...

javascriptmysqlcssweb