What Causes Aliasing When Rotating Elements Using CSS?

During my testing of rotation on a div element, I observed that applying CSS to rotate the div resulted in aliasing, which gave it an awkward appearance. You can view the Fiddle demonstration here:

Fiddle

CSS:

.alaised {
    width:200px;
    height:200px;
    border:2px solid green;
    transform:rotate(-8deg);
    -webkit-transform:rotate(-8deg);
    -moz-transform:rotate(-8deg);
    margin:50px;
}

In the fiddle, you will notice that when the div is rotated, it appears aliased, but when it's not rotated and hovered over, it appears anti-aliased.

I've been searching for solutions online and attempted adding shadows with small widths and the same color as a workaround, but even the shadow appeared aliased.

Note: This issue seems more prominent on screens with resolutions of 1024x768 or lower, which are commonly used these days.

csshtml

Answer №1

Just discovered a new technique: http://jsfiddle.net/zGAvZ/1/ (tested on Firefox 18)

Here is the relevant CSS code:

.aliased {
    width:200px;
    height:200px;
    margin:50px;
}

.aliased:after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    border:2px solid green;
    transform:rotate(-8deg);
    -webkit-transform:rotate(-8deg);
    -moz-transform:rotate(-8deg);
}

.aliased:hover {
    transform:rotate(8deg);
    -webkit-transform:rotate(8deg);
    -moz-transform:rotate(8deg);    
}

The concept involves rotating the :after pseudo-element normally and then applying the opposite rotation to the element itself upon hover. In Firefox 18, the square maintains its appearance nicely even after hovering.

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 method for configuring the asp-for input tag helper to create camelCase names?

My view model is structured as follows: public class MyModel{ public DateTime? StartDate {get;set;} } When using an input tag on a view with the asp-for tag helper, the default HTML generated looks like this: <input type="datetime" id="StartD ...

htmlasp.net-core-mvctag-helpers

Employing JavaScript for fading divs in and out sequentially

Hey there! I'm currently struggling with implementing transitions for my tool tips. Any assistance would be greatly appreciated! I am looking to have my "fader" divs fade in and out on click of a button, with each transition lasting 5 seconds. It&apo ...

javascriptjqueryhtmlcssonclick

Chrome displays the page layout differently upon initial loading

https://i.sstatic.net/GhfJc.pngI am currently seeking a developer position and have created a personal website to showcase my skills to potential employers. However, I have encountered a bug that only seems to affect Chrome browser. When the page is first ...

htmlcssgoogle-chrometwitter-bootstrap-3

The use of JQuery's .show() and .hide() functions may disrupt the functionality of CSS hover

When working with this jsFiddle, it appears that the jQuery .show() function does not behave as expected. Despite the documentation stating that it should revert CSS attributes to their original values, using .show(x).delay(x).hide(x) seems to cause the CS ...

jquerycsshovershow-hide

"Enhancing user interaction with Vue.js through the stunning ripple effect on

Is there a way to customize the ripple effect from this source so that it doesn't always have to be a DIV? Here's an example: Currently, when I implement it like this: <ripple class="btn">send</ripple> It works as expected, but as ...

javascripthtmlvue.js

Creating a sticky footer using Vue.js for both mobile and desktop display views

Looking for a solution to create a sticky footer that works on both desktop and mobile views without overlapping the main content? The current code either overlaps or doesn't stick to the bottom. Seeking a responsive approach. App.vue: <template& ...

htmlcssvue.jsfooter

Clicking on the image in an owl carousel slider does not trigger the onsen template page to load

I am experiencing an issue with my owl carousel slider while calling an API for page content on image click. I have implemented an onsen template page using ng-click on image, but it only works for the first image click. Subsequent images do not call the o ...

javascriptjqueryhtmlangularjsonsen-ui

Something is amiss with the PHP email validation functionality

I have been facing issues with the functionality of my form that uses radio buttons to display textboxes. I implemented a PHP script for email validation and redirection upon completion, but it doesn't seem to be functioning correctly. The error messa ...

javascriptphpjqueryhtmlcss

The .keypress() function isn't behaving as expected

I've encountered a coding dilemma. Below is the code in question: $(document).ready(function () { var selectedDay = '#selected_day'; $(function () { $("#date").datepicker({ dateFormat: "DD, d M yy", a ...

javascriptjqueryhtml

Optimal method for integrating Google Font in GWT application

After successfully installing the Roboto font on my machine, I proceeded to include it in my welcome.html file by adding the following code: <link href='http://fonts.googleapis.com/css?family=Roboto:regular,medium,bold,thin' rel='stylesh ...

cssgwtfonts

Issue with setting innerHTML of element in AngularJS app upon ng-click event

Look at this block of HTML: <div class="custom-select"> <div class="custom-select-placeholder"> <span id="placeholder-pages">Display all items</span> </div> <ul class="custom-select- ...

javascripthtmlangularjsinnerhtml

"Struggling with a basic Javascript function to refresh parts of a web page by calling a .php

After spending several hours browsing the internet, I am still struggling to get this straightforward example to function properly. Could someone please lend me a hand? My goal is to use JavaScript to display the contents of a PHP file. The display should ...

phpjavascriptjqueryhtmlrefresh

Creating a unique Tag Name for Dynamic Components in Angular

I want to customize a component @Component({ selector: '[my-component]', template: `<i>1</i><p>content</p><b>2</b>` }) export class MyComponent { public tagName: string; } Then there's another comp ...

htmlangularangular-componentsangular-dynamic-components

I am struggling to run the jQuery animation that adjusts the width more than once

My goal is to allow the user to expand and retract a <div> element upon clicking. The desired behavior is for the <div> to expand when clicked, and then retract back to its original width when clicked again. However, when testing this function ...

jqueryhtmlcss

JavaScript interprets a null date as January 1, 1970

My current setup involves using AngularJS to call a web API and store data. However, an issue arises when JavaScript interprets a null date as January 1st, 1970 in the input box. Is there a way to display an empty input box when the date is null? When rea ...

javascriptangularjshtml

Is it possible to use Javascript to automatically calculate the number of characters in a form input box and then populate the form quantity input

I have successfully created a JavaScript function that counts the characters in a TextArea and displays the result in another TextArea. Now, I am faced with the task of adapting this function to work within an existing shopping cart form, where it is curr ...

javascriptjqueryhtmlforms

Is there a way to utilize local resources in case CDNs are unable to load properly?

Encountering an issue with Bootstrap and jQuery loading from CDN, sometimes failing to import from the CDN source. For instance: <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYii ...

javascripthtml

Arrange the children dynamically

I'm struggling to position my ul menu at the top right corner of the page and adjusting the spacing between the items. Whenever I try to add padding, it disrupts the inline display. What am I missing here? #menu { top:0; width:100%; hei ...

htmlcssflexbox

Implementing email validation on the view layer for the yii framework using JavaScript

<script type="text/javascript"> function validate() { var email = document.getElementById('email').value; var phone = document.getElementById('phone').value; var emailFilter = /^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([ ...

javascriptphphtmlyii

Swapping out an ImageButton for a custom-styled icon

I am in need of replacing an ImageButton within a GridView ItemTemplate with an icon that is defined in a CSS style. My usual approach would be to replace the ImageButton with a hidden button and then use JQuery to trigger a click event on the hidden butt ...

jquerycssasp.netgridview