https://jsfiddle.net/nxbg7rq3/
In this example I need the .mask to be completely on top of the .screen. In Safari (and Chrome Mobile) that just doesn't want to work. I've tried a lot and am at the end of my tether.
It'd be nice to accomplish this without me having to change a lot of the structure that's already present in the jfiddle. Ta!
html
<div class="device">
<div class="perspective">
<div class="screen">
<img src="http://lorempixel.com/400/200/" alt="">
</div>
<div class="mask"></div>
</div>
</div>
</div>
css
.container {
-webkit-backface-visibility: visible;
z-index: 0;
transform: translate3d(0px, 0px, 0px);
position: absolute;
top: 20%;
width: 200px;
height: 300px;
}
.device {
-webkit-transform-origin: left center;
transform-origin: left center;
-webkit-transform: translate3d(-38%, -50%, 0) scale(1);
transform: translate3d(-38%, -50%, 0) scale(1);
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
}
.perspective {
perspective: 114.35897435897436em;
-webkit-perspective-origin: 0% 50%;
perspective-origin: 0% 50%;
width: auto
}
.screen {
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-transform-origin: 67.5% 50%;
transform-origin: 67.5% 50%;
-webkit-transform: translateY(-51%) scale(1.07) rotateY(34deg);
transform: translateY(-51%) scale(1.07) rotateY(34deg);
position: absolute;
top: 50%;
left: 2.5%;
width: 100%;
height: 100%;
overflow: hidden;
outline: 5px solid #fa5d86;
z-index: 0;
}
.screen img {
width: 400px;
height: 300px;
}
.mask {
-webkit-transform-style: flat;
transform-style: flat;
width: 200px;
height: 200px;
position: relative;
max-height: 100%;
border: 5px solid black;
z-index: 100;
}
You can use double .mask? Example:
<div class="container">
<div class="device">
<div class="mask" style="position: absolute;"></div>
<div class="perspective">
<div class="screen">
<img src="http://lorempixel.com/400/200/" alt="">
</div>
<div class="mask" style="opacity: 0;"></div>
</div>
</div>
Related
I want to move the blue container around the circle (with it's bottom margin if possible). What I succeded until now is to move it by it's center(still not so smooth).
Does css has any option to translate & rotate in a circle direction? What I tried was to translate and rotate at the same time by using this three points (top, right, and top-right) of the circle, because I only need it to rotate 90 deg.
#mainContent{ position: relative;
display: block;
width: 100vw;
border: none;
margin: 0 auto;
height: 100vh;
overflow: visible;
background: black;
}
#circle{
position: absolute;
left: 50%;
top: 50%;
background: red;
border-radius: 50%;
width: 100px;
height: 100px;
transform: translate(-50%, -50%);
}
.container{
position: absolute;
left: 50%;
top: 50%;
background: pink;
width: 100px;
height: 100px;
transform: translate(-50%, -50%);
}
#element{
position: absolute;
top: 50%;
left: 50%;
width: 20px;
height: 60px;
background: blue;
transform-origin: center;
transform: translate(-50%, -50%);
animation: orbit 3s linear infinite;
}
#keyframes orbit{
0% {
transform-origin: center;
transform: translate(-50%, calc(-50% - 50px)) rotate(0deg);
}
50%{
transform-origin: center;
transform: translate(calc(-50% + 35.35px), calc(-50% - 35.35px)) rotate(45deg);
}
100% {
transform-origin: center;
transform: translate(calc(-50% + 50px), -50%) rotate(90deg);
}
}
*{
margin: 0;
}
<div id="mainContent">
<div class="container"></div>
<div id="circle"></div>
<div id="element"></div>
</div>
You have to play with the transform-origin
#mainContent {
position: relative;
display: block;
width: 100vw;
border: none;
margin: 0 auto;
height: 100vh;
overflow: visible;
background: black;
}
#circle {
position: absolute;
left: 50%;
top: 50%;
background: red;
border-radius: 50%;
width: 100px;
height: 100px;
transform: translate(-50%, -50%);
}
.container {
position: absolute;
left: 50%;
top: 50%;
background: pink;
width: 100px;
height: 100px;
transform: translate(-50%, -50%);
}
#element {
position: absolute;
top: 50%;
left: calc(50% - 10px);
width: 20px;
height: 60px;
background: blue;
transform-origin: top center;
animation: orbit 3s linear infinite;
}
#keyframes orbit {
to {
transform: rotate(360deg);
}
}
* {
margin: 0;
}
<div id="mainContent">
<div class="container"></div>
<div id="circle"></div>
<div id="element"></div>
</div>
If i understand right, you need to set the translate-origin to the side which the blue rectangle reach the center of the red circle, check the snipet:
(hover the red circle to hide the blue rectangle)
div {
position: relative;
width: 200px;
height: 200px;
margin: 10em auto;
}
.round {
border-radius: 100%;
background: red;
}
.round:hover + .rectangle{background:transparent;}
.rectangle {
width: 100%;
height: 20px;
background: blue;
position: absolute;
top: 0;
bottom: 0;
right: 50%;
margin: auto;
transform-origin: right;
transform: rotate(0deg);
animation: orbit 3s linear infinite;
}
.moon{
width:50px;height:50px;
background:white;
border:1px solid gray;
border-radius:100%;
position:absolute;
top:0;
bottom:0;
margin:auto;
}
#keyframes orbit {
0% {
transform: rotate(0deg);
}
50% {
transform: rotate(180deg);
}
100% {
transform: rotate(359deg);
}
}
<div>
<div class="round"></div>
<div class="rectangle">
<div class="moon"></div>
</div>
</div>
Don't center the element but put it on the top side and then adjust the transform-origin to make it at the center of the circle:
#mainContent {
position: relative;
margin: 0 auto;
height: 100vh;
overflow: visible;
background: black;
}
#circle {
position: absolute;
left: 50%;
top: 50%;
background: red;
border-radius: 50%;
width: 100px;
height: 100px;
transform: translate(-50%, -50%);
}
.container {
position: absolute;
left: 50%;
top: 50%;
background: pink;
width: 100px;
height: 100px;
transform: translate(-50%, -50%);
}
#element {
position: absolute;
top: calc(50% - 80px); /* 80 = (60 + 100)/2*/
left: calc(50% - 10px);
width: 20px;
height: 60px;
background: blue;
transform-origin: 50% calc(100% + 20px); /* 20 = (100 - 60)/2 */
animation: orbit 3s linear infinite;
}
#keyframes orbit {
100% {
transform: rotate(360deg);
}
}
* {
margin: 0;
}
<div id="mainContent">
<div class="container"></div>
<div id="circle"></div>
<div id="element"></div>
</div>
Guys, I hope you are all fine, Guys am facing a problem actually I have a CSS flip box code but in this code, it's just showing 1 flip box in one row I want 4 flip boxes in one row how can I do this please help me Thanks.
Here is my code:
<div class="box">
<div class="front"></div>
<div class="back"></div>
</div>
CSS:
.box {
position: inherit;
top: calc(50% - 200px);
left: calc(50% - 150px);
width: 300px;
height: 400px;
transform-style: preserve-3d;
transition: 2s;
transform: perspective(500px) rotateY(00deg);
}
.box:hover {
transform: perspective(500px) rotateY(180deg);
}
.box:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 50px;
height: 100%;
background: url(moon-side.jpg);
transform: rotateY(90deg) translateX(-25px);
transform-origin: left;
}
.box .front {
width: 100%;
height: 100%;
background: url(moon.jpg);
transform: translateZ(25px);
}
.box .back {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(moon.jpg);
transform: translateZ(-25px) rotateY(180deg);
}
add display: inline-block; to your .box. And you can make 4 instances of your flip box in the HTML. Also your heights were a little weird, so this might be what you want?
.box {
position: inherit;
transform-style: preserve-3d;
transition: 2s;
transform: perspective(500px) rotateY(00deg);
display: inline-block;
float: center;
padding: 5px;
}
.box:hover {
transform: perspective(500px) rotateY(180deg);
}
.box:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 10px;
height: 100%;
background: url(moon-side.jpg);
transform: rotateY(90deg) translateX(-25px);
transform-origin: left;
}
.box .front {
width: 100%;
height: 100%;
background: url(moon.jpg);
transform: translateZ(25px);
}
.box .back {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(moon.jpg);
transform: translateZ(-25px) rotateY(180deg);
}
.container {
text-align: center;
}
<div class="container">
<div class="box">
<div class="front">hello front</div>
<div class="back">hello back</div>
</div>
<div class="box">
<div class="front">hello front</div>
<div class="back">hello back</div>
</div>
<div class="box">
<div class="front">hello front</div>
<div class="back">hello back</div>
</div>
<div class="box">
<div class="front">hello front</div>
<div class="back">hello back</div>
</div>
</div>
Is it possible to use css to floating 'child' on 'parent'? Like ‘other’.Now it looks like the effect is just scaling 'child' instead of translation.
body{
height: 100vh;
overflow: hidden;
}
.space{
background: #000;
height: 100vh;
perspective: 1000px;
}
.layer{
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%) rotateX(85.8deg) rotateY(0.1deg) rotateZ(-45deg);
height: 50%;
width: 50%;
perspective: 1000px;
}
#parent{
background: #fff;
}
#other{
background: #aaa;
transform: translateX(-50%) translateY(-50%) translateZ(1050px) rotateX(72.8deg) rotateY(0.1deg) rotateZ(-45deg);
}
<body>
<div class='space'>
<div class='layer' id='parent'>
<div id='child' style="transform: translateZ(200px);background: #555;width: 50%; height: 50%;"></div>
</div>
<div class='layer' id='other'></div>
</div>
</body>
transform-style: preserve-3d;
working
I'm designing a rotating cube logo for my portfolio site. After trying all night, for some reason my 3D cube logo is no longer a cube. Two problems:
The shape of the cube is distorted. The .front div is larger than all the other divs for the cube. I can't see why this is happening.
When .container div's animation is commented out, you'll notice the viewer position is head on. I need the view position to be more 'isometric', like the viewer is looking at the edge of the cube from above. I've tried to rotate the Z- and Y-axis of the .container div to achieve this but no luck so far. Un-comment the background-color: pink; on the .container div to see this.
I have a feeling the above problems are to do with the perspective property. I'm not sure how to calculate the correct amount of perspective here, and this could be my problem.
Here's my CodePen link.
HTML:
<div class="container">
<div class="cube">
<div class="front"><img src="https://s3.eu-west-2.amazonaws.com/cube-logo/logo.png" alt="logo"></div>
<div class="back"><img src="https://s3.eu-west-2.amazonaws.com/cube-logo/logo.png" alt="logo"></div>
<div class="left"><img src="https://s3.eu-west-2.amazonaws.com/cube-logo/logo.png" alt="logo"></div>
<div class="right"><img src="https://s3.eu-west-2.amazonaws.com/cube-logo/logo.png" alt="logo"></div>
<div class="top"><img src="https://s3.eu-west-2.amazonaws.com/cube-logo/logo.png" alt="logo"></div>
<div class="bottom"><img src="https://s3.eu-west-2.amazonaws.com/cube-logo/logo.png" alt="logo"></div>
</div>
</div>
CSS:
html {
background: #666;
}
body {
margin: 0;
padding: 0;
height: 100vh;
}
.container {
position: relative;
top: 50%;
left: 50%;
margin-left: -200px;
margin-top: -200px;
width: 400px;
height: 400px;
/* background-color: pink; */
transform-style: preserve-3d;
perspective: 1000px;
animation: rotate 2000ms linear infinite;
}
.cube {
/* background-color: blue; */
width: 200px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -100px;
transform-style: preserve-3d;
}
.cube div {
position: absolute;
width: 200px;
height: 200px;
border: 5px solid #ccc;
box-sizing: border-box;
background-size: cover;
}
.cube img {
width: 100%;
opacity: 1;
}
.front {
transform: translateZ(100px);
}
.back {
transform: rotateY(180deg) translateZ(100px);
}
.left {
transform: rotateY(-90deg) translateZ(100px);
}
.right {
transform: rotateY(90deg) translateZ(100px);
}
.top {
transform: rotateX(90deg) translateZ(100px);
}
.bottom {
transform: rotateX(-90deg) translateZ(100px);
}
#keyframes rotate {
0% {
transform: rotateY(0deg);
}
100% {
transform: rotateY(360deg);
}
}
There are an issue because you rotate the container and its perspective as well.
you want a perspective on the cube, you have to set the perspective property on body element (or any kind of container of your animation that is not animated itself) and avoid to set it on the animated element. Actually, moving the element that is set by a perspective value will move this 3D element inside a 2D view – its own parent element. That causes the weird cube rendering on your exemple.
Also, if you want to control the perpective origin, you can use perspective-origin that lets you determine the position at which the viewer is looking. Associated with perspective property, you will be able to control the whole rendered scene.
So, the result will change with following code:
html { background: #666; }
body {
margin: 0;
padding: 0;
height: 100vh;
perspective: 900px;
perspective-origin: bottom;
}
.container {
position: relative;
top: 50%;
left: 50%;
margin-left: -200px;
margin-top: -200px;
width: 400px;
height: 400px;
transform-style: preserve-3d;
animation: rotate 2000ms linear infinite;
}
.cube {
width: 200px;
height: 200px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -100px;
margin-top: -100px;
transform-style: preserve-3d;
}
.cube div {
position: absolute;
width: 200px;
height: 200px;
border: 5px solid #ccc;
box-sizing: border-box;
background-size: cover;
}
.cube img {
width: 100%;
}
.front { transform: translateZ(100px); }
.back { transform: rotateY(180deg) translateZ(100px); }
.left { transform: rotateY(-90deg) translateZ(100px); }
.right { transform: rotateY(90deg) translateZ(100px); }
.top { transform: rotateX(90deg) translateZ(100px); }
.bottom { transform: rotateX(-90deg) translateZ(100px); }
#keyframes rotate {
to { transform: rotateY(360deg); }
}
<body>
<div class="container">
<div class="cube">
<div class="front"><img src="https://s3.eu-west-2.amazonaws.com/cube-logo/logo.png" alt="logo"></div>
<div class="back"><img src="https://s3.eu-west-2.amazonaws.com/cube-logo/logo.png" alt="logo"></div>
<div class="left"><img src="https://s3.eu-west-2.amazonaws.com/cube-logo/logo.png" alt="logo"></div>
<div class="right"><img src="https://s3.eu-west-2.amazonaws.com/cube-logo/logo.png" alt="logo"></div>
<div class="top"><img src="https://s3.eu-west-2.amazonaws.com/cube-logo/logo.png" alt="logo"></div>
<div class="bottom"><img src="https://s3.eu-west-2.amazonaws.com/cube-logo/logo.png" alt="logo"></div>
</div>
</div>
</body>
I have to make a logo shape in my website. The design is given below. How do I develop that?
For the first part of the logo I have created it using CSS3 skew property,
I have fiddled the link below. How do I develop the triangle section and the third part of the logo. The triangle is slider, so images inside should change.
https://jsfiddle.net/iamshajeer/x2og8utk/1/
.logo-menu {
height: 76%;
left: 11%;
margin: 0 auto;
width: 80%;
}
.first-part {
display: inline-block;
left: 135px;
position: relative;
transform: skew(-22deg);
width: 180px;
}
.menu-1{
background:red
}
.menu-2{
background:blue
}
.menu-3{
background:yellow
}
<div class="logo-menu">
<div class="first-part">
<div class="menu-1" style="height: 167px;">
<h3>About Us</h3>
</div>
<div class="menu-2" style="height: 167px;">
<h3>Gallery</h3>
</div>
<div class="menu-3" style="height: 167px;">
<h3>Get in Touch with</h3>
</div>
</div>
</div>
You could use CSS transforms to rotate and skew an element into a diamond, and then reverse those transforms for the child elements. If you have overflow: hidden; on the diamond and position the diamond in a wrapper that also has overflow: hidden;, you could produce a clipping triangle with content using just CSS.
Working Example (Codepen):
/* Clip the bottom half of the diamond. */
.triangle-wrap {
width: 400px;
height: 400px;
position: relative;
overflow: hidden;
}
/* Rotate and skew to create a diamond. */
.triangle {
background: grey;
position: absolute;
bottom: -50%;
width: 100%;
height: 100%;
overflow: hidden;
-webkit-transform: rotate(45deg) skew(20deg, 20deg);
-moz-transform: rotate(45deg) skew(20deg, 20deg);
-ms-transform: rotate(45deg) skew(20deg, 20deg);
transform: rotate(45deg) skew(20deg, 20deg);
}
/* Reset the skew and rotation. */
.triangle-reset {
width: 100%;
height: 100%;
position: relative;
-webkit-transform: skew(-20deg, -20deg) rotate(-45deg);
-moz-transform: skew(-20deg, -20deg) rotate(-45deg);
-ms-transform: skew(-20deg, -20deg) rotate(-45deg);
transform: skew(-20deg, -20deg) rotate(-45deg);
}
/* Create a content wrapper. */
.triangle-content {
background: url('http://placehold.it/400x400') no-repeat;
background-position: center center;
background-size: cover;
position: relative;
width: 120%;
height: 120%;
left: -10%;
bottom: 65%;
}
/* Visual aid. */
html {
min-height: 100%;
background: linear-gradient(to bottom, #336666 0%,#663366 100%);
}
<div class="triangle-wrap">
<div class="triangle">
<div class="triangle-reset">
<div class="triangle-content">
</div>
</div>
</div>
</div>
background-clip is what you're looking for. Check out this great article:
https://css-tricks.com/clipping-masking-css/
Here's an online tool to help you generate shapes:
http://bennettfeely.com/clippy/
After you generate each shape, you can position them to look like your image.
It is not perfect what you want but near to that.
Right side first div not looking good.
.third-part {
display: inline-block;
left: 500px;
position: relative;
transform: skew(22deg);
width: 180px;
}
.logo-menu {
height: 76%;
left: 11%;
margin: 0 auto;
width: 80%;
}
.first-part {
display: inline-block;
left: 135px;
position: relative;
transform: skew(-22deg);
width: 180px;
}
.menu-1{
background:red
}
.menu-10{
background: blue;
/* Skew */
left: -70px;
position: relative;
transform: skew(50deg);
width: 190px;
}
.menu-2{
background:blue
}
.menu-3{
background:yellow
}
.second-part {
top: 36%;
}
.second-part {
}
.second-part {
display: inline-block;
height: 100%;
left: 240px;
position: absolute;
top: 25%;
width: 520px;
}
.second-part .triangle-shape {
left: 4%;
margin: 0;
max-width: 700px;
position: absolute;
}
.wrap {
display: inline-block;
margin: 240px 0;
transform: rotate(45deg) translate3d(0px, 0px, 0px);
transition: transform 300ms ease-out 0s;
width: 500px;
}
.crop {
height: 465px;
margin: 0;
overflow: hidden;
position: relative;
transform: skew(22deg, 22deg) translate3d(0px, 0px, 0px);
width: 450px;
}
.crop img {
height: 650px;
left: -50%;
opacity: 1;
position: absolute;
top: -50%;
transform: skew(-20deg, -20deg) rotate(-45deg);
transition: opacity 300ms ease-in-out 0s;
width: 500px;
}
}
.second-part .triangle-shape {
left: 4%;
margin: 0;
max-width: 700px;
position: absolute;
}
.wrap {
display: inline-block;
margin: 240px 0;
transform: rotate(45deg) translate3d(0px, 0px, 0px);
transition: transform 300ms ease-out 0s;
width: 500px;
}
.crop {
height: 465px;
margin: 0;
overflow: hidden;
position: relative;
transform: skew(22deg, 22deg) translate3d(0px, 0px, 0px);
width: 450px;
}
.crop img {
height: 650px;
left: -50%;
opacity: 1;
position: absolute;
top: -50%;
transform: skew(-20deg, -20deg) rotate(-45deg);
transition: opacity 300ms ease-in-out 0s;
width: 500px;
}
<div class="logo-menu">
<div class="first-part">
<div class="menu-1" style="height: 167px;">
<h3>About Us</h3>
</div>
<div class="menu-2" style="height: 167px;">
<h3>Gallery</h3>
</div>
<div class="menu-3" style="height: 167px;">
<h3>Get in Touch with</h3>
</div>
</div>
<div class="second-part">
<div class="triangle-shape">
<div class="wrap">
<div class="crop">
<img alt="" src="http://s23.postimg.org/wlo0phrsb/triangle01.jpg">
<h2>Projects</h2>
</div>
</div>
</div>
</div>
<div class="third-part">
<div class="menu-10" style="height: 120px;">
<h3>Products</h3>
</div>
<div class="menu-2" style="height: 167px;">
<h3>Services</h3>
</div>
<div class="menu-3" style="height: 167px;">
<h3>Location Map</h3>
</div>
</div>
</div>
Hope it will help to move forward.
Check Fiddle.
You can use SVG (http://www.w3schools.com/svg/) to draw and position the shapes and then apply CSS over them like color and backgound to get the desired results.