Sloped element in 3D space with CSS3
I would like to make this tilt / rotate element using CSS3.
I tried with clip-path
, but after creating the shape, I cannot add a border, box-shadow or border to it.
clip-path: polygon(5% 7%, 98% 0, 100% 83%, 0 74%);
I've tried with transform
, but it doesn't only rotate because the sides have different orientations. Also I tried with SVG , but the information I found was not enough to find a solution to my problem. This is my last solution, I'd rather use CSS3 than SVG if possible ...
Any sugestions?
+3
source to share
2 answers
You can use CSS3 rotate3d
MDN
-
perspective
in parent element -
transform: rotate3d(x, y, z, a)
it has a child
/*QuickReset*/ *{margin:0;box-sizing:border-box;} html,body{height:100%;font:14px/1.4 sans-serif;}
body{background: #2C8BF9;}
.slantedParent{
position:relative;
width: 300px; height:200px;
top:10px; left:10px;
perspective: 800px;
}
.slanted{
background: #fff;
border-radius: 32px;
height:100%;
padding: 32px;
box-shadow: 0 8px 16px rgba(0,0,0,0.1);
transform: rotate3d(3, -2, 0.4, 25deg); /* play with those values */
}
<div class="slantedParent">
<div class="slanted">
<h1>Some content?</h1>
</div>
</div>
+4
source to share
Do something like this.
#shape {
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
width: 150px;
height: 100px;
-webkit-transform: skew(-10deg);
-moz-transform: skew(-10deg);
-o-transform: skew(-10deg);
background: red;
border-radius:5px;
box-shadow:0px 0px 4px #000;
border: 5px solid #eee;
}
<div id="shape"></div>
-1
source to share