I have a problem with the css3. I am currently following a tutorial then when I test it on my local copy, the css3 is not being read by the browser. here is the code:
<html>
<head>
<style type="text/css">
/*custom font - Montserrat*/
#import url(http://fonts.googleapis.com/css?family=Montserrat);
/* Background */
html, body{ min-height: 100%}
body {
background: #123;
background: linear-gradient(#123, #399);
}
/*basic reset*/
* {margin:0; padding: 0;}
/*Thumbnail BG*/
.thumb { width: 400px; height: 300px; margin: 70px auto;
perspective: 1000px;
}
.thumb a {
display: block; width: 100%; height: 100%;
background: url("http://thecodeplayer.com/u/m/i1.png");
transform-style: preserve-3d;
/* hover effect */
transform: rotateX(80deg); transform-origin:bottom;
}
</style>
</head>
<body>
<div class="thumb">
<a href="#">
<!-- LABEL -->
<span></span>
</a>
</div>
</body>
The part transform-style: preserve-3d and below is not being read by the browser when I test it. Am I doing something wrong? I am using sublime-text 2 to create it.
I am using Chrome ver32 btw.
You need to add the vendor prefix and I think you want your hover effect pulled out into another rule, see this working example http://plnkr.co/edit/e1WJ5ogErMW6R6TDwX20?p=preview
You are missing some part of CSS from the source,
Here is a Demo with full CSS
#import url(http://fonts.googleapis.com/css?family=Montserrat);
/*basic reset*/
* {margin: 0; padding: 0;}
/*forcing the body to take 100% height*/
html, body {min-height: 100%;}
/*a nice BG*/
body {
background: #544; /*fallback*/
background: linear-gradient(#544, #565);
}
/*Thumbnail Background*/
.thumb {
width: 400px; height: 300px; margin: 70px auto;
-webkit-perspective: 1000px;
}
.thumb a {
display: block; width: 100%; height: 100%;
/*double layered BG for lighting effect*/
background:
linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
url("http://thecodeplayer.com/u/m/i1.png");
/*disabling the translucent black bg on the main image*/
background-size: 0, cover;
/*3d space for children*/
-webkit-transform-style: preserve-3d;
transition: all 0.5s;
}
.thumb:hover a {-webkit-transform: rotateX(80deg); -webkit-transform-origin: bottom;}
/*bottom surface */
.thumb a:after {
/*36px high element positioned at the bottom of the image*/
content: ''; position: absolute; left: 0; bottom: 0;
width: 100%; height: 36px;
/*inherit the main BG*/
background: inherit; background-size: cover, cover;
/*draw the BG bottom up*/
background-position: bottom;
/*rotate the surface 90deg on the bottom axis*/
-webkit-transform: rotateX(90deg); -webkit-transform-origin: bottom;
}
/*label style*/
.thumb a span {
color: white; text-transform: uppercase;
position: absolute; top: 100%; left: 0; width: 100%;
font: bold 12px/36px Montserrat; text-align: center;
/*the rotation is a bit less than the bottom surface to avoid flickering*/
-webkit-transform: rotateX(-89.99deg); -webkit-transform-origin: top;
z-index: 1;
}
/*shadow*/
.thumb a:before {
content: ''; position: absolute; top: 0; left: 0;
width: 100%; height: 100%;
background: rgba(0, 0, 0, 0.5);
box-shadow: 0 0 100px 50px rgba(0, 0, 0, 0.5);
transition: all 0.5s;
/*by default the shadow will be almost flat, very transparent, scaled down with a large blur*/
opacity: 0.15;
-webkit-transform: rotateX(95deg) translateZ(-80px) scale(0.75);
-webkit-transform-origin: bottom;
}
.thumb:hover a:before {
opacity: 1;
/*blurred effect using -webkit-box shadow as filter: blur is not supported in all browsers*/
box-shadow: 0 0 25px 25px rgba(0, 0, 0, 0.5);
/*pushing the shadow down and scaling it down to size*/
-webkit-transform: rotateX(0) translateZ(-60px) scale(0.85);
}
Try This Link i have Prepared Demo
instead of using just
background: linear-gradient(#123, #399);
Use as below
background: -webkit-linear-gradient(#123, #399);
background: -moz-linear-gradient(#123, #399);
background: -o-linear-gradient(#123, #399);
background: linear-gradient(#123, #399);
Same for all other css3 property.
Read More about vendor prefix here or just search it.
Try it.
-moz-transform:rotateX(80deg);
-webkit-transform:rotateX(80deg);
Related
I'm following a tutorial on youtube on how to create a Glowing Border Animation with CSS
I tried to implement it myself and was pretty successful, however, I encountered a problem which I'm unable to solve. When I view my animation there is an uneven transition. It looks like as if two images are stuck together where the colours transition is cut off.
How can I solve the issue there with my transition looks smooth?
I created a JSFiddle to display what I mean:
* {
margin: 0;
padding: 0;
}
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: #151320;
}
.box {
position: relative;
width: 300px;
height: 300px;
color: #fff;
font: 300 2rem 'Montserrat';
text-align: center;
text-transform: uppercase;
display: flex;
align-items: center;
}
.box::before,
.box::after {
content: '';
z-index: -1;
position: absolute;
width: calc(100% + 30px);
height: calc(100% + 30px);
top: -15px;
left: -15px;
background: linear-gradient(45deg, #0096FF, #0047AB, #000000, #6082B6, #87CEEB, #00008B, #145DA0, #00008B, #145DA0, #0096FF, #0047AB, #000000, #6082B6, #87CEEB);
background-repeat: repeat;
border-radius: 5px;
background-size: 600%;
animation: border 12s linear infinite;
}
.box::after {
filter: blur(25px);
}
#keyframes border {
0% {
background-position: 0% 0%;
}
100% {
background-position: 250% 250%;
}
}
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet'>
<div class="box">
Greetings fellow developer!
</div>
Note: The animation looks smooth at first but after about 7ish seconds you encounter the "cut off" where the transition doesn't line up.
Your gradient need to have a kind of repetition to achieve such effect. Make its size 200% 200% then use a repeating gradient where the first color start at 0% and the last one at 50%. Notice how the list of color is repeated twice but in the opposite order.
body {
background: #151320;
}
.box {
position: relative;
width: 300px;
height: 300px;
}
.box::before,
.box::after {
content: '';
z-index: -1;
position: absolute;
inset: -15px;
background:
repeating-linear-gradient(45deg,
#0096FF 0%, #0047AB, #6082B6, #87CEEB, #00008B,
#00008B, #87CEEB, #6082B6,#0047AB,#0096FF 50%);
border-radius: 5px;
background-size: 200% 200%;
animation: border 2s linear infinite;
}
.box::after {
filter: blur(25px);
}
#keyframes border {
0% {
background-position: bottom left;
}
100% {
background-position: top right;
}
}
<div class="box">
</div>
here is the shape i want to do enter link description here
P.S.I am still learning the front-end stuff so could you pls help me with this assignment.
Here is the HTML code <div>Elzero</div>
here is the CSS code i tried to do with
* {
box-sizing: border-box;
}
div {
width: 200px;
height: 200px;
background-color: #eee;
margin: 80px auto;
color: black;
font-size: 50px;
font-weight: bold;
text-align: center;
line-height: 200px;
border-radius: 50%;
}
::after {
content: "";
width: 200px;
height: 200px;
background-color: #03a9f4;
margin: 80px auto;
border-radius: 50%;
position: absolute;
transform: translate(-190px, -80px);
z-index: -1;
}
::before {
content: "";
width: 200px;
height: 200px;
background-color: #e91e63;
margin: 80px auto;
border-radius: 50%;
position: absolute;
top: 0px;
z-index: -2;
}
div:hover {
transition: all 0.5s;
transform: rotate(180deg);
}
As you are constrained to use just one div, this snippet builds on your idea of having the pseudo elements but creating them with conic-gradient backgrounds and the 'main' div having the light gray circular background created using a radial gradient. That way it creates these 3 shapes.
and overlays them to give the impression of 3/4 circles. It then uses CSS animation to rotate them on hover.
Obviously you will want to play with the dimensions, the animations timings and directions to get exactly what you want but this should give a start.
* {
box-sizing: border-box;
}
div {
width: 200px;
height: 200px;
background-image: radial-gradient(#eee 0 55%, transparent 55% 100%);
margin: 80px auto;
color: black;
font-size: 50px;
font-weight: bold;
text-align: center;
line-height: 200px;
border-radius: 50%;
position: relative;
}
div::after {
content: "";
width: 200px;
height: 200px;
border-radius: 50%;
position: absolute;
top: 0;
left: 0;
z-index: -2;
background-image: conic-gradient(#03a9f4 0deg 45deg, white 45deg 135deg, #03a9f4 135deg 360deg);
}
div::before {
content: "";
width: calc(100% - 10%);
height: calc(100% - 10%);
position: absolute;
border-radius: 50%;
position: absolute;
top: 5%;
left: 5%;
z-index: -1;
background-image: conic-gradient(#e91e63 0, #e91e63 225deg, white 225deg, white 315deg, #e91e63 315deg, #e91e63 360deg);
}
div:hover::after {
animation: rot .4s linear;
}
div:hover::before {
animation: rot .4s linear;
animation-delay: .1s;
animation-direction: reverse;
}
#keyframes rot {
0% {
transform: rotate(0);
}
25% {
transform: rotate(180deg);
}
50% {
transform: rotate(180deg);
}
75% {
transform: rotate(0);
}
100% {}
}
<div>Elzero
</div>
also here is example in less:
https://codepen.io/nikitahl/pen/XooBXd
if you want to use css here is a converter:
https://jsonformatter.org/less-to-css
I found this code on https://thecodeplayer.com/index.php/walkthrough/3d-thumbnail-image-hover-effect and I want to make the image both responsive and whenever I change an image, the image has to scale to the div.
I tried to set: width: 100%; and height: auto; but it did not work. Is it because the HTML does not contain <img> tags? As I'm trying to learn I would appreciate any advice you have for me on how to solve this.
/*custom font - Montserrat*/
#import url(http://fonts.googleapis.com/css?family=Montserrat);
/*basic reset*/
* {margin: 0; padding: 0;}
/*forcing the body to take 100% height*/
html, body {min-height: 100%;}
/*a nice BG*/
body {
background: #544; /*fallback*/
background: linear-gradient(#544, #565);
}
/*Thumbnail Background*/
.thumb {
width: 400px; height: 300px; margin: 70px auto;
perspective: 1000px;
}
.thumb a {
display: block; width: 100%; height: 100%;
/*double layered BG for lighting effect*/
background:
linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),
url("http://thecodeplayer.com/u/m/i1.png");
/*disabling the translucent black bg on the main image*/
background-size: 0, cover;
/*3d space for children*/
transform-style: preserve-3d;
transition: all 0.5s;
}
.thumb:hover a {transform: rotateX(80deg); transform-origin: bottom;}
/*bottom surface */
.thumb a:after {
/*36px high element positioned at the bottom of the image*/
content: ''; position: absolute; left: 0; bottom: 0;
width: 100%; height: 36px;
/*inherit the main BG*/
background: inherit; background-size: cover, cover;
/*draw the BG bottom up*/
background-position: bottom;
/*rotate the surface 90deg on the bottom axis*/
transform: rotateX(90deg); transform-origin: bottom;
}
/*label style*/
.thumb a span {
color: white; text-transform: uppercase;
position: absolute; top: 100%; left: 0; width: 100%;
font: bold 12px/36px Montserrat; text-align: center;
/*the rotation is a bit less than the bottom surface to avoid flickering*/
transform: rotateX(-89.99deg); transform-origin: top;
z-index: 1;
}
/*shadow*/
.thumb a:before {
content: ''; position: absolute; top: 0; left: 0;
width: 100%; height: 100%;
background: rgba(0, 0, 0, 0.5);
box-shadow: 0 0 100px 50px rgba(0, 0, 0, 0.5);
transition: all 0.5s;
/*by default the shadow will be almost flat, very transparent, scaled down with a large blur*/
opacity: 0.15;
transform: rotateX(95deg) translateZ(-80px) scale(0.75);
transform-origin: bottom;
}
.thumb:hover a:before {
opacity: 1;
/*blurred effect using box shadow as filter: blur is not supported in all browsers*/
box-shadow: 0 0 25px 25px rgba(0, 0, 0, 0.5);
/*pushing the shadow down and scaling it down to size*/
transform: rotateX(0) translateZ(-60px) scale(0.85);
}
<!-- Container -->
<div class="thumb">
<!-- Image -->
<a href="#">
<!-- Label -->
<span>Three-eyed Robot</span>
</a>
</div>
I am using the code below to rotate the image, but I can only achieve to rotate the image from front view to bottom view. I want to rotate the image from front view to left view. How can I achieve this?
body {
height: 100vh;
margin: 0;
}
.thumb {
width: 600px;
height: 400px;
perspective: 1000px;
}
.thumb a {
display: block;
width: 100%;
height: 100%;
background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url("https://i.imgur.com/9NVqw8Q.jpg");
background-size: 0, cover;
transform-style: preserve-3d;
transition: all 0.5s;
}
.thumb:hover a {
transform: rotateX(80deg);
transform-origin: bottom;
}
.thumb a:after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 36px;
background: inherit;
background-size: cover, cover;
background-position: bottom;
transform: rotateX(90deg);
transform-origin: bottom;
}
.thumb a:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
box-shadow: 0 0 100px 50px rgba(0, 0, 0, 0.5);
transition: all 0.5s;
opacity: 0.15;
transform: rotateX(95deg) translateZ(-80px) scale(0.75);
transform-origin: bottom;
}
.thumb:hover a:before {
opacity: 1;
box-shadow: 0 0 25px 25px rgba(0, 0, 0, 0.5);
transform: rotateX(0) translateZ(-60px) scale(0.85);
}
<div class="thumb">
</div>
Modify rotateX to rotateY since left view makes use of the vertical axis.
Modify the transform-origin to left as we are transforming with the left side as the rotating point.
Apply the similar changes to the pseudo elements for the 3D look as mentioned by #kaiido. I have commented the changes made.
body {
height: 100vh;
margin: 0;
}
.thumb {
width: 600px;
height: 400px;
perspective: 1000px;
margin: 100px; /* For snippet spacing */
}
.thumb a {
display: block;
width: 100%;
height: 100%;
background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url("https://i.imgur.com/9NVqw8Q.jpg");
background-size: 0, cover;
transform-style: preserve-3d;
transition: all 0.5s;
}
.thumb:hover a {
transform: rotateY(45deg); /* 1 - From rotateX */
transform-origin: left; /* 2 - From bottom */
}
.thumb a:after {
content: '';
position: absolute;
left: 0px;
bottom: 0;
width: 36px; /* Interchanged width and height because horizontal transformation is now vertical transformation */
height: 100%;
background: inherit;
background-size: cover, cover;
background-position: bottom;
transform: rotateY(90deg); /* 1 - From rotateX */
transform-origin: left; /* 2 - From bottom */
}
.thumb a:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
box-shadow: 0 0 100px 50px rgba(0, 0, 0, 0.5);
transition: all 0.5s;
opacity: 0.15;
transform: rotateY(15deg) translateZ(-40px) scale(0.75); /* 3 - From rotateX */
transform-origin: bottom;
}
.thumb:hover a:before {
opacity: 1;
box-shadow: 0 0 25px 25px rgba(0, 0, 0, 0.5);
transform: rotateY(0) translateZ(-60px) scale(0.85); /* 3 - From rotateX */
}
<div class="thumb">
</div>
#manoj-kumar is right.
make use of rotateX to rotateY
also you have to set transform-origin and position for the :after to make it wrap on left
fiddle : https://jsfiddle.net/hellooutlook/6sagLtpk/2/
body {
height: 100vh;
margin: 0;
}
.thumb {
margin: 100px;
width: 600px;
height: 400px;
perspective: 1000px;
}
.thumb a {
display: block;
width: 100%;
height: 100%;
background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url("https://i.imgur.com/9NVqw8Q.jpg");
background-size: 0, cover;
transform-style: preserve-3d;
transition: all 0.5s;
}
.thumb:hover a {
transform: rotateY(60deg);
/* From rotateX */
transform-origin: left;
/* From bottom */
}
.thumb a:after {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 30px;
height: 100%;
background: inherit;
background-size: cover, cover;
background-position: bottom;
transform: rotateY(110deg);
transform-origin: left;
/* extra */
border-top-right-radius: 3px;
border-bottom-right-radius: 3px;
}
.thumb a:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
box-shadow: 0 0 100px 50px rgba(0, 0, 0, 0.5);
transition: all 0.5s;
opacity: 0.15;
transform: rotateX(15deg) translateZ(-40px) scale(0.75);
transform-origin: bottom;
}
.thumb:hover a:before {
opacity: 1;
box-shadow: 0 0 25px 25px rgba(0, 0, 0, 0.5);
transform: rotateX(0) translateZ(-60px) scale(0.85);
}
<div class="thumb">
</div>
Is it possible to do free transforms of an element using CSS - similar to a mesh transform?
The closest I can get to this is using something like transform: perspective(400px) rotateY(45deg); with three elements, but I would like it to be one continuous img element.
You can consider 3 elements and background-image. The trick is to adjust the background-size/background-position to create the illusion of one continuous image.
Hover to see the result:
.box {
margin: 50px auto;
width: 200px;
height: 200px;;
background-size: 300% auto;
background-position: center;
position: relative;
}
.box:before,
.box:after {
content: "";
position: absolute;
width: 100%;
top: 0;
bottom: 0;
background-image: inherit;
background-size: 300% auto;
transform: perspective(800px);
transition: 0.5s all;
}
.box:before {
right: 100%;
background-position: left;
transform-origin: right;
}
.box:after {
left: 100%;
background-position: right;
transform-origin: left;
}
.box:hover::before {
transform: perspective(800px) rotateY(50deg);
filter: brightness(0.8);
}
.box:hover::after {
transform: perspective(800px) rotateY(-50deg);
filter: brightness(0.8);
}
<div class="box" style="background-image: url(https://picsum.photos/id/1/1000/800)">
</div>