I want create 2 divs like this picture
i have tried this for div 1 but it doesnt look good. can you help me please?
.div1 {
-webkit-transform:perspective(2500px) rotate3d(1, 0, 0, 46deg);
-webkit-transform-origin:100% 0%;
-webkit-transform-style:preserve-3d;
}
transform-style:preserve-3d; is something you use when you have nested 3D transformed elements and you want to create a realistic 3D look (and you apply it on the parent element in that case). You have no need for it here.
The effect you want is actually really simple to achieve:
DEMO
HTML:
<div class='parent'>
<div class='div1'>div1</div>
<div class='div2'>div2</div>
</div>
Relevant CSS:
.parent { perspective: 20em; }
.div1 {
transform: rotateX(30deg);
transform-origin: 0 100% 0;
}
Related
Could not find anything on this for the life of me. I simply want to display 1 little icon, multiple times on the same row,
But want to rotate each instance a bit more then the last one. So by the end of the row, the last icon is completely flipped compared to the first icon.
Here is my attempt: (thanks)
<div class="container">
<p class="one">I don't</p><p class="two">really want </p><p class="three">any</p><p class="four">words here</p>
</div>
<style>
p.one {
float:left;
image: url("http://www.itel.am/assets/ico/iconsForSocials/gl.png");
}
p.two {
float:right;
background-image: url("http://www.itel.am/assets/ico/iconsForSocials/gl.png");
transform: rotate(60deg);
}
p.three {
float:right;
background-image: url("http://www.itel.am/assets/ico/iconsForSocials/gl.png");
transform: rotate(120deg);
}
p.four {
float:right;
background-image: url("http://www.itel.am/assets/ico/iconsForSocials/gl.png");
transform: rotate(180deg);
}
</style>
Positioning system in a row can be achieved with 2 ways. The first and easy way is bootstrap grid system , so your problem could be solved like this
<div class="container-fluid">
<div class="col-sm-3">img</div>
<div class="col-sm-3">img</div>
<div class="col-sm-3">img</div>
<div class="col-sm-3">img</div>
</div>
Replace the img keyword i wrote with your images and transform them as you like inside css and you will be all set.
The second and more advanced way to place images in a row inside a div is position css attribute.
position:relative;
top:40px;
left:70px;
This will place the element in a specific place relative to its parent , so then you could place them wherever you want.
There are definitely more ways to do this like flexbox and more , but i totally recommend using bootstrap grid system because its easy to use and most of all responsive!
I think you should separate the text from rotating. something like this
<div class="container">
<p><span class="one"></span>I don't</p>
<p><span class="two"></span>really want </p>
<p><span class="three"></span>any</p>
<p><span class="four"></span>words here</p>
</div>
and in css use image as background image
.container {width:100%}
.container p { float:left; margin:0 20px}
.container p span {
width:20px; height:20px; display:block;
background: url("http://www.itel.am/assets/ico/iconsForSocials/gl.png") no-repeat left center; float:left;
}
.two { transform: rotate(60deg); }
.three { transform: rotate(120deg); }
.four { transform: rotate(180deg); }
here is the working sample
I want to be able to have a side-bar slide in. I have almost gotten there but I am having issues with the main view snapping into place while the side bar slides in. I have created this Plunkr to demonstrate the problem I'm having. Notice how the body doesn't move with the side-panel. How can I make this work as I expect?
body:
<div class="container">
<div class="child">
<a href ui-sref="main.sidePanel">show side panel</a>
</div>
<div ui-view class="slide"></div>
</div>
side-panel:
<div class="side-panel-body">
<a href ui-sref="main">hide side panel</a>
</div>
css:
.container {
display: flex;
height: 400px;
padding: 20px 0;
}
.child {
background: yellow;
flex: auto;
}
.side-panel-body {
width: 400px;
height: 100px;
background: lightgray;
}
.slide.ng-enter,
.slide.ng-leave {
transition: all 2s ease;
}
.slide.ng-enter {
transform: translate(100%, 0);
}
.slide.ng-enter-active {
transform: translate(0, 0);
}
.slide.ng-leave {
transform: translate(0, 0);
}
.slide.ng-leave-active {
transform: translate(100%, 0);
}
Without going into too much detail about transformations. The easy answer is that translating a DOM element has no effect on other DOM elements.
So you have a flexbox with 2 divs in it. They're functioning as expected. When you expand the window, the left div expands to fill, as it's set to flex: auto, while the right div stays at 400px of fixed width.
When you transform: translate the righthand div, all you are doing is visually moving it. It's container, as well as the lefthand div, still consider it to be exactly where it started. That is, until you actually hide it or remove it. When the right hand div is hidden, then you can see the lefthand div fill up the flex-box.
So to achieve what you want, you'd need to either animate both divs, lefthand for size, and righthand for translation. Or actually change the width of the righthand div, allowing the transition: all 2s ease;to handle the animation for you.
Thanks to #CH Buckingham I came up with a solution. It's not exactly how I imagined, but it works just fine and really isn't THAT hacky. This allows you to toggle the sidebar with a scope variable but you can have the flexibility of content with ui-router.
<div class="container">
<div class="child">
<a href ui-sref="main.sidePanel">show side panel</a>
</div>
<div ng-show="showSidebar" class="sidebar">
<div ui-view class="uiview"></div>
</div>
</div>
css (less):
.container {
display: flex;
}
.child {
flex: auto;
}
.sidebar {
width: 1000px; // for some reason this acts more like a max-width for the sidebar. The actually width matches the size of the ui-view.
&.ng-hide-add, &.ng-hide-remove {
transition: all ease .8s;
overflow-x: hidden;
}
&.ng-hide {
width: 0;
}
}
I'm building a strange div shaped structure and I need a hint to resolve a clicking problem.
This is a jsfiddle to show you the issue.
The structure for each element is:
<div class="views-row">
<div class="diamonds-container">
CONTENT
</div>
</div>
I have a onclick() event on .diamonds-container but the .views-row div of the next element [with red or blue background..] go over the container and stop the click event on it.
I tryed to play with the z-index but I didn't have the expected result.
How can I achieve this structure with a correct click event on diamonds-containers ?
I think I can track the .views-row click with javascript and trigger manually a click on the previous diamonds-container but this will be my final option.
How can I achieve this without javascript?
UPDATE:
I have to position my diamonds like this
so I can't use the #matewka code because I will have the overlaping vertically instead of orizzontally..
There is more than one route for this kind of problem.
If you use the rotation transform anyway, why not rotate the .views-row element to get the bounding box out of the way?
For recent browsers and IE11 there are pointer events. See this updated fiddle.
.views-row {
z-index: 1;
pointer-events: none;
}
.diamonds-container {
z-index: 9;
pointer-events: auto;
}
Here is my approach. I'm not sure if nesting two divs inside each other was for rotating purpose or had some other meaning. Anyway, I did it this way:
.views-row {
width: 130px;
height: 130px;
-webkit-transform: rotate(45deg);
}
.views-row-first {
-webkit-transform-origin: 195px center;
}
.views-row-even {
-webkit-transform-origin: center center;
}
.views-row-odd {
-webkit-transform: rotate(-45deg);
-webkit-transform-origin: -65px center;
}
Each .views-row is rotated and the transform origins are all pointed to the center of the middle div. Notice that the transform-origin values are multiplicities of the half of the width (130px / 2).
See the updated FIDDLE for the complete CSS. I also added a :hover property for .diamonds-container so you can see that they're all clickable.
UPDATE
With the picture you added the problem became much more complicated. But I figured it out.
Hint: If you can't wait for the fiddle - you'll find it at the bottom of the answer.
The idea:
Square boxes are nested twice. Each 2 .diamond boxes are wrapped with the .pair-wrapper div. That div is rotated 45deg and it is repeated few times along its container. Each even .pair-wrapper has increased width to position its right-hand neighbour properly.
A bunch of .pair-wrappers are wrapped with the .line-wrapper. You can add as much .line-wrappers and .pair-wrapper as you want (remember - .pair-wrappers will break into the new line if they don't fit).
Finally, each .line-wrapper has fixed height and hidden overflow to restrict its children area from the top and the bottom. Each .pair-wrapper is positioned relatively and has negative top value.
The solution is based mostly on fixed values, both I could figure out a better idea.
The code
Example HTML markup looks like this:
<div class="line-wrapper line-wrapper-odd">
<div class="pair-wrapper pair-wrapper-odd">
<div class="diamond-box"></div>
<div class="diamond-box"></div>
</div>
<div class="pair-wrapper pair-wrapper-even">
<div class="diamond-box"></div>
<div class="diamond-box"></div>
</div>
<div class="pair-wrapper pair-wrapper-odd">
<div class="diamond-box"></div>
<div class="diamond-box"></div>
</div>
</div>
<div class="line-wrapper line-wrapper-even">
<div class="pair-wrapper pair-wrapper-odd">
<div class="diamond-box"></div>
<div class="diamond-box"></div>
</div>
.....
</div>
.....
And the most important parts from CSS (complete CSS in the fiddle):
.line-wrapper {
height: 170px;
overflow: hidden;
}
.line-wrapper-even {
margin-left: -92px;
}
.pair-wrapper {
width: 130px;
position: relative;
top: -26px;
-webkit-transform: rotate(45deg);
}
.pair-wrapper-odd {
-webkit-transform-origin: 65px 65px;
}
.pair-wrapper-even {
-webkit-transform-origin: 92px 131px;
width: 239px;
}
.diamond-box {
width: 130px;
height: 130px;
}
The fiddle
http://jsfiddle.net/N3V6J/3/
I'm really confused how scaling an element using css transforms affects document flow.
Consider this jsbin or this codepen since jsbin seems to have gone down where I have
p{slipsum text}
#scaled
#scaled-content{some text}
p{slipsum text}
with the stylesheet
#scaled-contents {
height: 400px;
width: 400px;
background-color: blue;
color: red;
font-size: 3em;
}
#scaled {
transform: scale(0.25, 0.25); //browser prefixes...
width: 100px;
height: 100px
}
I would expect this to show up similarly to a single 100x100 blue square. But it is shifted and on chrome even overlaps the following p element slightly. In addition, examining the dimensions of #scaled in devtools shows at as squat and long, seemingly breaking beyond it's 100x100 box.
Finally, adding overflow: hidden; to #scaled does something crazy altogether.
What is going on? How is content flow supposed to be affected?
CSS Transform does not affect document flow. The DOM element will occupy it's original position and dimensions within the page flow.
So if you have 3 square div's of identical size, displayed inline in a row and apply a -webkit-transform: scale(2) to the center square, this square will scale up to 200% larger, scale from the center of its original position, and overlap both other squares.
Reference example:
http://jsfiddle.net/ypnEk/
HTML:
<div class="square one"></div>
<div class="square two"></div>
<div class="square three"></div>
CSS:
.square{
margin-top:50px;
width:50px;
height:50px;
display:inline-block;
}
.one{
background:#222;
}
.two{
background:#888;
-webkit-transform: scale(2);
}
.three{
background:#ccc;
}
I want to create an animated HTML "marquee" that scrolls back and forth on a website:
<div class="marquee">This is a marquee!</div>
and the CSS:
.marquee {
position: absolute;
white-space: nowrap;
-webkit-animation: rightThenLeft 4s linear;
}
#-webkit-keyframes rightThenLeft {
0% {left: 0%;}
50% {left: 100%;}
100% {left: 0%;}
}
The problem is, the marquee doesn't stop when it reaches the right-hand edge of the screen; it moves all the way off the screen (making a horizontal scroll bar appear, briefly) and then comes back.
So, how do I make the marquee stop when its right-hand edge reaches the right-hand edge of the screen?
EDIT: Oddly, this does not work:
50% {right: 0%}
Somehow I got it to work by using margin-right, and setting it to move from right to left.
http://jsfiddle.net/gXdMc/
Don't know why for this case, margin-right 100% doesn't go off the screen. :D
(tested on chrome 18)
EDIT: now left to right works too http://jsfiddle.net/6LhvL/
You could simply use CSS animated text generator. There are pre-created templates already
Hi you can achieve your result with use of <marquee behavior="alternate"></marquee>
HTML
<div class="wrapper">
<marquee behavior="alternate"><span class="marquee">This is a marquee!</span></marquee>
</div>
CSS
.wrapper{
max-width: 400px;
background: green;
height: 40px;
text-align: right;
}
.marquee {
background: red;
white-space: nowrap;
-webkit-animation: rightThenLeft 4s linear;
}
see the demo:- http://jsfiddle.net/gXdMc/6/
I like using the following to prevent things being outside my div elements. It helps with CSS rollovers too.
.marquee{
overflow:hidden;
}
this will hide anything that moves/is outside of the div which will prevent the browser expanding and causing a scroll bar to appear.
If I understand you question correctly, you could create a wrapper around your marquee and then assign a width (or max-width) to the wrapping element. For example:
<div id="marquee-wrapper">
<div class="marquee">This is a marquee!</div>
</div>
And then #marquee-wrapper { width: x }.
I am not sure if this is the correct solution but I have achieved this
by redefining .marquee class just after animation CSS.
Check below:
<style>
#marquee-wrapper{
width:700px;
display:block;
border:1px solid red;
}
div.marquee{
width:100px;
height:100px;
background:red;
position:relative;
animation:myfirst 5s;
-moz-animation:myfirst 5s; /* Firefox */
}
#-moz-keyframes myfirst /* Firefox */{
0% {background:red; left:0px; top:0px;}
100% {background:red; left:100%; top:0px}
}
div.marquee{
left:700px; top:0px
}
</style>
<!-- HTMl COde -->
<p><b>Note:</b> This example does not work in Internet Explorer and Opera.</p>
<div id="marquee-wrapper">
<div class="marquee"></div>