how to set transform for div without effect on background image?


Tags: html,css,css3

Problem :

I want to create a Parallelogram object by flat (true) background-image .

HTML:

<div class="q-item"></div>

CSS:

.q-item {
    width: 180px;
    height: 132px;
    background:url('http://jsfiddle.net/img/logo.png') no-repeat no-repeat 13px 1px;
    float: left;
    margin-left: 58px;
    padding-right: 1%;
    border: 2px solid #1D2A3D;
    -webkit-transform: skew(-20deg);
    -moz-transform: skew(-20deg);
    -o-transform: skew(-20deg);
}

please see my sample at jsfiddle

how to set transform for div without effect on object's on this element and whiteout effect at this background?



Solution :

I had success by adding a pseudo-element ::before, moving the background-image to that pseudo-element, and applying a reversed skew to counteract your original skew.

This is based on a solution at sitepoint.com.

.q-item {
    width: 180px;
    height: 132px;
    float: left;
    margin-left: 58px;
    padding-right: 1%;
    border: 2px solid #1D2A3D;
    -webkit-transform: skew(-20deg);
    -moz-transform: skew(-20deg);
    -ms-transform: skew(-20deg);
    -o-transform: skew(-20deg);
    transform: skew(-20deg);
}

.q-item::before {
    content:"";
    position: absolute;
    width: 100%;
    height: 100%;
    background:url('http://jsfiddle.net/img/logo.png') no-repeat no-repeat 33px 1px;
    -webkit-transform: skew(20deg);
    -moz-transform: skew(20deg);
    -ms-transform: skew(20deg);
    -o-transform: skew(20deg);
    transform: skew(20deg);
}

WORKING EXAMPLE


    CSS Howto..

    How to fix responsive drop down menu using css?

    How can i hide certain table column in a HTML table using CSS

    How to create folder style in CSS

    how to style a symfony2 form button

    How to make the css affect the new content loaded by jquery?

    How to bind Menus and submenus apply css using Jquery?

    How to center icons in div consistently? [duplicate]

    how i can make slideshow, get information(image, title , content) from database? [closed]

    CSS: How to create special shape

    How can I clip and transform an image, adding rounded corners and perspective?

    How to make this CSS layout

    How do I implement this basic CSS for just one category?

    How do I scale the size of the elements in my HTML according to screen size?

    CSS: how to layout 3 columns, 2 are optional

    How to Load Resources (Css, js files) in Laravel 4 (Optimization)

    How do I stop internet explorer's propriety gradient filter from cutting off content that should overflow?

    how to convert list item to slider when browser is less than 640px?

    How to create centered image slideshow behind website content

    Integrating CSS and CherryPy: How to fix the 404 “/” Not Found Error?

    How can I make a DIV element Fixed but non-Scaleable?

    Show hint over a CSS background image on mouse over

    How to accomplish onHover event without a second image

    How to fix width of tooltip at IE8

    how to fit the original text format of a paragraph into the html paragraph element using jquery?

    How to achieve a two column centered layout, with the main column expandable on wider screens?

    how to make this div margin to zero and more nature [closed]

    How to get CSS pulsating effect to work in FireFox and Internet Explorer?

    How to set stylesheet programmatically in an ASP.NET MVC 2 project?

    How to position two blocks side by side with CSS

    How to configure simple_form to show validation status