can be done a slice between two divs in CSS like the following photo ?
I tried to google it but didn't found anything usefull for my problem
Thanks !
I suggest you to do it with image .
But if you want to do with css , here is example ,
css
.parallelogram { width: 150px; height: 100px; -webkit-transform: skew(20deg);
-moz-transform: skew(20deg); -o-transform: skew(20deg); background: red;
float:left;margin-left:18px;margin-right:8px;}
.parallelogram2 { width: 150px; height: 100px; -webkit-transform: skew(20deg);
-moz-transform: skew(20deg); -o-transform: skew(20deg); background: Black;float:left; }
html
<div class="parallelogram"></div>
<div class="parallelogram2"></div>
Fiddle example !
And you can check and learn how css shapes works here and here !
Good Luck !
Related
I have a css div I want first to rotate at 180deg from the center origin and then rotate from -45deg from the "new" bottom left corner.
But I don't manage to apply two different rotations
https://imgur.com/a/9GSToEx -> So you can better understand
CSS
.player1{
background-color: blueviolet;
transform-origin: center;
transform: rotate(180deg);
transform-origin: bottom left;
transform: rotate(45deg);
}
HTML
<div class="player1">
<div class="questionSpace"></div>
</div>
Thank you ^^
This can be a bit tricky because of the need to move the origin and the rotations not being additive.
A fairly straightforward way of getting round the problem is to enclose the element in a parent whose sole purpose is to allow an independent 180deg rotation.
This snippet colors the player1 element with a linear-gradient so it can be seen that the 180deg rotation has taken place.
.player1container {
display: inline-block;
transform: rotate(180deg);
margin: 20vmin;
/* added just for demo */
}
.player1 {
background-color: blueviolet;
width: 20vmin;
height: 10vmin;
background-image: linear-gradient(red, blue);
transform: rotate(-45deg);
transform-origin: top right;
}
<div class="player1container">
<div class="player1">
<div class="questionSpace"></div>
</div>
</div>
Hmm. Your code is wrong, because this rules have conflict and last rule have more priority;
transform: rotate(180deg);
...
transform: rotate(45deg);
You need to use #keyframes
for example:
#rotate {
0% {
transform: rotate(0);
}
50% {
transform: rotate(180deg);
}
100% {
transform-origin: left;
transform: rotate(45deg);
}
}
and then you need to use animation: rotate;
I am creating a thermometer for fundraising on my website. I have created a code to make the thermometer but it is at a horizontal line not a vertical line. Can you please help to rotate this?
Thanks
<div class="primary_font font-32px"><span class="font-16px"></span></div>
<div class='donation_raise_bar' style="background-color:#dee1dd;border-radius:9px;position:relative;width:800;height:26px;">
<span class="fundraise_raised_percentage" style="background-color:#fb1085;border-radius:20px;display:block;overflow:hidden;height:100%;line-height:1.5;min-width:1%!important;width:50%">
<center><span class="fundraise_amount_raised white_text arial_font font-12px bold-text">50%</span></center>
</span>
</div>
<div class="margin-top">
<div class="arial_font font-16px"><span class="bold-text"></span></div>
</div>
<div id="container_2"></div>
</div>
Use transform css property. Also Remember to use margins to fix it proper position.
<style>
.donation_raise_bar {
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-o-transform: rotate(270deg);
-ms-transform: rotate(270deg);
transform: rotate(270deg);
}
</style>
If you want to rotate an element with css you can try like this
.rotate {
-ms-transform: rotate(7deg); /* IE 9 */
-webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */
transform: rotate(7deg);
}
.rectangle-box{
width: 200px;
height: 200px;
background-color: yellow;
}
now apply .rotate to your html element. Like
<div class="rectangle-box rotate">
</div>
Sorry, i can't comment because of my too low reputation.
You will probably need to use "transform-origin" css property when you start using rotate to have a better control on the axis of rotation.
Is there a way to transpose a background image with CSS? (By "transpose" I mean that every pixel x,y in the source image ends up as pixel y,x in the background.)
Example
Source image:
Transposed image:
The result image can in fact be achieved after scaling it around Y axis with factor of -1 and then applying rotate transform of -90deg. Try this:
div.transposed {
-webkit-transform-origin:left top;
-webkit-transform:scaleY(-1) rotate3d(0,0,1,-90deg);
}
Demo
Note that we have to rotate -90deg instead of 90deg because we use scaleY before, it will turn the positive direction of Y axis from top-to-bottom (downwards) to bottom-to-top (upwards). In fact scaleY(-1) is equal to rotateX(180deg), in 3D, that means the positive direction of Z axis will be inverted (instead of outwards from screen, it will be inwards to the screen), hence the rotating angle should be -90deg instead of 90deg as we might think.
Please test the demo on webkit-based browsers.
If by "transpose" you mean this, it's similar with "rotate 270 deg and reflect vertically" or "rotate 90 deg and reflect horizontally".
There you can find full solution to "rotate background" problem: http://thewebthought.blogspot.com/2013/04/css-rotate-background-images.html
After rotating you can reflect image by transform:scaleY(-1) or transform:scaleX(-1).
If I understand your question you want to rotate the image 90 degrees. pixels along x become pixels along y. In CSS3 this is a transform.
#myParentElement
{
-webkit-transform: rotate(90deg) scaleX(-1) /* updated to add flip */;
-ms-transform: rotate(90deg) scaleX(-1);
transform: rotate(90deg) scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
to do this to a background image you would need to apply the CSS transform to the parent of the element that has the background image. Apply another transform to the element so that its contents are not transformed.
#myParentElement
{
-webkit-transform: rotate(90deg) scaleX(-1);
-ms-transform: rotate(90deg) scaleX(-1);
transform: rotate(90deg) scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
#myElement
{
-webkit-transform: rotate(-90deg) scaleX(-1);
-ms-transform: rotate(-90deg) scaleX(-1);
transform: rotate(-90deg);
filter: FlipH;
-ms-filter: "FlipH";
}
use this code to rotate the background 90 degrees on an element without affecting the element itself:
#myelement {
height: 164px;
overflow: hidden;
position: relative;
width: 79px;
}
#myelement:before {
background: url("http://i.stack.imgur.com/gMRiV.png") no-repeat;
content: "";
height: 79px;
left: -42px;
position: absolute;
top: 42px;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
width: 164px;
z-index: -1;
}
and the html code:
<div id="myelement">test</div>
example:
http://jsfiddle.net/fs4Dz/
I'm trying to create a cube with CSS. I actually think it's already there but I can't see it.
Feel free to edit the fiddle.
I don't understand why the perspective is not working.
Is this best practice?
Is it possible to rotate the cube as a whole??
Source: 24ways.
HTML:
<section class="container">
<div id="cube">
<figure class="front">1</figure>
<figure class="back">2</figure>
<figure class="right">3</figure>
<figure class="left">4</figure>
<figure class="top">5</figure>
<figure class="bottom">6</figure>
</div>
</section>
CSS:
.container {
margin: 200px auto;
width: 200px;
height: 200px;
position: relative;
-webkit-perspective: 800px;
}
#cube {
width: 100%;
height: 100%;
position: absolute;
-webkit-transform-style: preserve-3d;
}
#cube figure {
width: 198px;
height: 198px;
display: block;
position: absolute;
border: 1px solid #ddd;
background-color: rgba(0,0,0,0.2);
}
#cube .front { -webkit-transform: rotateY(0deg) translateZ(100px); }
#cube .back { -webkit-transform: rotateX(180deg) translateZ(100px); }
#cube .right { -webkit-transform: rotateY(90deg) translateZ(100px); }
#cube .left { -webkit-transform: rotateY(-90deg) translateZ(100px); }
#cube .top { -webkit-transform: rotateX(90deg) translateZ(100px); }
#cube .bottom { -webkit-transform: rotateX(-90deg) translateZ(100px); }
The problem could be that the hardware acceleration was not supported on your PC and it was on your mac... css3d transformations such as rotateX and rotateY require hardware accelerations.
in chrome go to your address bar and enter
chrome://gpu
you will see
3D CSS: Unavailable. Hardware acceleration disabled.
if this is the case then 3d cube is not visible.
Have a look at http://css3.bradshawenterprises.com/transforms/#transDemo3.
I have a wrapper around the cube that I rotate - in this case to keep it simple, I actually use three divs, one for X, one for Y and one for Z.
The playground underneath should show you how perspective etc work.
I used to work with a lot of 3D Transforms a while ago but recently noticed that CSS3 perspective does not have any effect on my web browsers including Chrome.
Tried the following and it helped in Google Chrome:
Navigate to "chrome://flags"
Find an item labeled "Override software rendering list" and disable it
Relaunch your browser
I know its a bit late but just in case it might help you...
I am trying to write up some CSS for a company logo that is a fairly accurate depiction of the jpg currently on the company server. its pretty basic except for some color overlays on the logo.
My question is:
is this even possible? if so how can i go about doing so
please dont bash, im a total noob, my first line of html was about a week ago...
Here is my markup
<html>
<head>
<meta charset="utf-8"/>
<title>
</title>
<link rel="stylesheet" href="css/stylesheet.css"
</head>
<style contenteditable="">
#infinity {
position: absolute;
width: 212px;
height: 100px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#infinity:before,
#infinity:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 60px;
height: 60px;
border: 15px solid;
-moz-border-radius: 50px 50px 0 50px;
border-radius: 50px 50px 0 50px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#infinity:before{
color: #ADB2B3;
}
#infinity:after {
left: auto;
right: 15;
color: #A99055;
-moz-border-radius: 50px 50px 50px 0;
border-radius: 50px 50px 50px 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
</style>
<body>
<br>
<br>
<div>
<div>
<div style="float:left; margin-right: 0px;"id="infinity">
</div>
<div>
<p style="float:left; margin-top:70px; margin-left:130px; font-size:60px;
font-family: Avenir, sans-serif;">
PORTFOLIO
</p>
</div>
</div>
</body>
</html>
Check this out: http://jsfiddle.net/tMEqk/1/
It's not quite there, but it's closer
I made a relatively positioned container and then drew out each loop from there, positioned everything according to the box. Changed the border to get the continuous effect and then obscured the diagonal line generated by a gold box. There's no rotation either, but if you want to change the size there's a little bit of math to be done. Did it in Chrome, haven't checked other browsers yet.
Edit
I'm not exactly condoning this, but I did enjoy trying to recreate it. This really should be an image, and you can prevent the broken image by saving and referencing it as a local file.
Just so I am straight. You are trying to create the entire logo with CSS? Is this correct? If so, why CSS versus using the JPEG? If you are using straight CSS you will be limited to what you can do, also most of it would be CSS3 and browser hacks, which poses a couple of problems.
The first being CSS3 is only supported in modern browsers.
The second being browser hacks don't pass W3 CSS validation.
This is not an answer, really, but I would strongly suggest that you can at most try to make a scalable vector image out of that logo, using Inkscape or such programs. This logo will be very easy to convert to SVG (scalable vector graphics). But as Kris said, using CSS to accomplish all of this may not perform as intended in many situations.