This is my code and transform is working in chrome browser but in firefox it is not working.
.delete-white a:before {
background: none repeat scroll 0 0 #FFFFFF;
height: 15px;
left: 6px;
margin-top: -7px;
width: 5px;
-webkit-transform: rotate(45deg) scale(1);
-moz-transform: rotate(45deg) scale(1);
-o-transform: rotate(45deg) scale(1);
-ms-transform: rotate(45deg) scale(1);
}
.delete-white a:after {
background: none repeat scroll 0 0 #FFFFFF;
height: 5px;
left: 1px;
margin-top: -2px;
width: 15px;
-webkit-transform: rotate(45deg) scale(1);
-moz-transform: rotate(45deg) scale(1);
-o-transform: rotate(45deg) scale(1);
-ms-transform: rotate(45deg) scale(1);
}
Two notes
You need to have content to :before/:after pseudo elements
You have forgotten the unprefixed version: transform: rotate(45deg) scale(1);
Add this rule to element: "display: inline-block;"
You need to include the standard, non-prefixed version (i.e. transform: rotate(45deg) scale(1);) as the final definition in your list of transforms. The -moz one is deprecated, as will/should be the other ones in time. See the MDN for reference.
Related
I have a wordpress site which i am helping a friend out with
https://capturingscotland.com/galleries
When hovering over the gallery images it shows a transparent red image with a more button. It works fine in chrome, IE, Firefox but when i have tried it on iphones and Ipads with safari it dosent seem to work. Below is the CSS classes used. porto-item is the gallery item
.porto .porto-item:hover img {
-webkit-transform: scale(1.2);
-ms-transform: scale(1.2);
transform: scale(1.2);
opacity: .2;
}
.porto .porto-item:hover .porto-info {
opacity: 1;
box-sizing: border-box;
height: 100%;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.porto .porto-item:hover .title {
opacity: 1;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
text-shadow: 0 0 0 white;
}
.porto .porto-item:hover .categories {
opacity: 1;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
text-shadow: 0 0 0 white;
}
.porto .porto-item:hover .more {
opacity: 1;
-webkit-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
text-shadow: 0 0 0 white;
}
If you want it so that whenever the item is touched the hover appears (like if scrolling) then you can add: cursor: pointer; to the element you wish the hover to appear on. Without this iOS only styles :hover events on links.
I have a less class as a function. I use calc() to set scale value, it working on chrome but not Firefox. this is my class:
.zoom(#value) {
transform: scaleX(#value);
-moz-transform: scaleX(#value);
-ms-transform: scaleX(#value);
-webkit-transform: scaleX(#value);
transform-origin: 0;
.blocFreq {
&:before {
-webkit-transform: scaleX(calc(1/#value)) !important;
-moz-transform: scaleX(-moz-calc(1/#value)) !important;
-ms-transform: scaleX(calc(1/#value)) !important;
transform: scaleX(calc(1/#value)) !important;
}
}
span.frequence {
-webkit-transform: scaleX(calc(1/#value))rotate(-44deg) !important;
-moz-transform: scaleX(-moz-calc(1/#value))rotate(-44deg) !important;
-ms-transform: scaleX(calc(1/#value))rotate(-44deg) !important;
transform: scaleX(calc(1/#value))rotate(-44deg) !important;
}
.text,
.text-service,
.popover {
-webkit-transform: scaleX(calc(1/#value)) !important;
-moz-transform: scaleX(calc(1/#value)) !important;
-o-transform: scaleX(calc(1/#value)) !important;
-ms-transform: scaleX(calc(1/#value)) !important;
transform: scaleX(calc(1/#value)) !important;
}
}
Try to remove calc function and use only (1/#value). I think that will fix your bug.
I have added a background image to a div, but because the div has been rotated, so has the background-image. How can I rotate just the image the opposite way to it appears straight?
live url: http://bit.ly/1iqXQRN
html
<section id="about-hero-img"></section>
css
#about-hero-img {
-webkit-transform: rotate(-2deg);
-moz-transform: rotate(-2deg);
-o-transform: rotate(-2deg);
-ms-transform: rotate(-2deg);
transform: rotate(-2deg);
width: 1030px; margin-left: -50px; margin-top: 20px; height: 200px; background-image: url('../Images/about-header-img.jpg'); padding-top: 30px; }
Move the background-image to a the :before pseudo-element of you header
#about-hero-img {
-webkit-transform: rotate(-2deg);
-moz-transform: rotate(-2deg);
-o-transform: rotate(-2deg);
-ms-transform: rotate(-2deg);
transform: rotate(-2deg);
width: 1030px;
margin-left: -50px;
margin-top: 20px;
height: 200px;
/* background-image: url('../Images/about-header-img.jpg'); */
padding-top: 30px;
position: relative;
}
#about-hero-img:before {
width: 1030px;
height: 230px;
position: absolute;
left: 0;
top: 0;
content: ' ';
background-image: url('../Images/about-header-img.jpg');
-webkit-transform: rotate(2deg);
-moz-transform: rotate(2deg);
-o-transform: rotate(2deg);
-ms-transform: rotate(2deg);
transform: rotate(2deg);
}
I have a couple divs, I want to rotate them to look like diamonds, but I don't want their background images to rotate, how can i achieve this? This is my code right now
<div id="diamonds">
<div class="diamond-big diamond-tiesto"><img src="<?php echo $images_url; ?>dj-1-overlay.png" /></div>
</div>
and my CSS:
#diamonds div {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
float:left;
}
.diamond-tiesto {background-image:url('images/dj-1.jpg'); background-size:cover; width:212px; height:212px; margin-left:160px; margin-right:120px;}
.diamond-tiesto img {margin-top:80px; margin-left:-20px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
Basically I am trying to achieve this http://mqchen.github.io/jquery.diamonds.js/ without the jquery, anyone have any suggestions
Heres a fiddle just incase:
http://jsfiddle.net/7qj8h/1/
You could use the techniques described in this article and apply the transformation to a background image pseudo-element.
Demo/Code here: http://jsfiddle.net/7qj8h/4/
HTML:
<div id="diamonds">
<div class="diamond-big diamond-tiesto">
<img src="http://solarismusicfestival.com/new/wp-content/themes/default-blank/images/dj-1-overlay.png" />
</div>
</div>
CSS:
.diamond-big
{
position: relative;
overflow: hidden;
width: 200px;
height: 200px;
/* rotate diamond */
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.label {
/* counter rotate label */
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
/* position label */
margin-top:80px;
margin-left:-20px;
}
.diamond-big:before
{
content: "";
position: absolute;
width: 200%;
height: 200%;
top: -50%;
left: -50%;
z-index: -1;
/* counter rotate bg */
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
/* set bg for different DJs */
.diamond-tiesto:before {
background: url(http://solarismusicfestival.com/new/wp-content/themes/default-blank/images/dj-1.jpg) 0 0 repeat;
}
Set the .diamond to rotate 45 degrees
Set the background on a .diamond-inner child div, and rotate it back -45 degrees to counter the parent's transformation.
Set overflow: hidden; on the .diamond div to clip the edges.
Adjust the positioning on the inner diamond and image.
The result: http://jsfiddle.net/7qj8h/3/
The CSS:
#diamonds > div {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
float:left;
overflow: hidden;
}
.diamond-tiesto {
width:212px;
height:212px;
}
.diamond-tiesto .diamond-inner {
background-image: url("http://solarismusicfestival.com/new/wp-content/themes/default-blank/images/dj-1.jpg");
background-size: cover;
height: 305px;
left: 2px;
margin: 0 0 0 -49px;
position: absolute;
top: -45px;
transform: rotate(-45deg);
width: 305px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
transform: rotate(-45deg);
}
.diamond-tiesto img {
margin-left: 22px;
margin-top: 123px;
}
I want to make a trapezoid with border radius like this picture. Is it possible?
I tried this code but it does not work
background: #BE1E2D;
width: 130px;
height: 75px;
-webkit-transform: skew(20deg);
-moz-transform: skew(20deg);
-o-transform: skew(20deg);
transform: skew(20deg);
Visit this website to look at how a lot of shapes are done.
For this shape though (as it is on the website), you need this:
#parallelogram {
width: 150px;
height: 100px;
-webkit-transform: skew(-20deg);
-moz-transform: skew(-20deg);
-o-transform: skew(-20deg);
background: red;
}
Try this. Doesn't use border-radius though.
.trapezoid{
width:100px;
height:100px;
border:1px solid #000;
background:yellow;
transform: skew(-20deg);
-o-transform: skew(-20deg);
-moz-transform: skew(-20deg);
-webkit-transform: skew(-20deg);
}
I don't see how you could do this with border-radius (or why you would want to)
You can do it with a simple skew:
#shape {
width: 150px;
height: 50px;
-webkit-transform: skew(-25deg);
-moz-transform: skew(-25deg);
-o-transform: skew(-25deg);
background: darkred;
}
DEMO