I am learning CSS transitions and transformations. here is HTML:
<!DOCTYPE html>
<html>
<head>
<title> Transformatons and Transitions</title>
<meta charset="utf-8">
<link rel="stylesheet" href="css/n.css">
</head>
<body>
<div class="animate">animate</div>
<div class="animate">animate2</div>
<div class="different">different1</div>
<div class="different">different2</div>
</body>
</html>
and the CSS is:
div.different {
transform: translate(1000px,400px);
border-style: solid;
padding: 25px;
background-color: yellow;
display: block;
width: 125px;
transition:1s ease-in-out;
}
div.different:hover{
background-color: red;
-webkit-transform: rotate(300deg);
}
The rotate is not working properly. instead of just rotating, the element is moving back the original place it was. Instead of staying at (1000px,400px) the element is going back to (0px,0px)
How do I prevent its moving?
You have to use translate on hover too because browser interpret your hover transform as translate(0,0) rotate(300deg):
div.different {
-webkit-transform: translate(1000px, 400px);
-ms-transform: translate(1000px, 400px);
transform: translate(1000px, 400px);
border-style: solid;
padding: 25px;
background-color: yellow;
display: block;
width: 125px;
transition: 1s ease-in-out;
}
div.different:hover {
background-color: red;
-webkit-transform: translate(1000px, 400px) rotate(300deg);
-ms-transform: translate(1000px, 400px) rotate(300deg);
transform: translate(1000px, 400px) rotate(300deg);
}
Define both transformations in the same statement and change them accordingly:
div.different {
transform: rotate(0deg) translate(1000px,400px);
border-style: solid;
padding: 25px;
background-color: yellow;
display: block;
width: 125px;
transition:1s ease-in-out;
}
div.different:hover{
background-color: red;
-webkit-transform: rotate(300deg) translate(1000px,400px);
}
Fiddle: https://jsfiddle.net/quvLtwjt/1/
You were overriding the previous transform.
But, if you want to rotate the div from the current position and not the old position then you need to use transform-origin to redefine the new position and put both transformations in the same statement:
div.different {
transform: rotate(0deg) translate(1000px,400px);
border-style: solid;
padding: 25px;
background-color: yellow;
display: block;
width: 125px;
transition:1s ease-in-out;
transform-origin: 1000px 400px;
}
div.different:hover{
background-color: red;
-webkit-transform: rotate(300deg) translate(1000px,400px);
}
Fiddle: https://jsfiddle.net/quvLtwjt/
Related
I tried to replicate a border hover effect but I didn't understand why I need to use ::before and ::after to do this Css effect.
This is the page example with the content that I want to replicate with css (I want to replicate the border effect):
http://77.238.26.244:81/confimi/pagina-di-test/
This is the homepage where I tried to replicate the css:
http://77.238.26.244:81/confimi/
In the first row there is the "example" and in the row below there is my attempt
This is the code that I made:
round {
background-image: url('http://77.238.26.244:81/confimi/wp-content/uploads/2016/08/a.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
height: 100%;
}
.layer {
background-color: rgba(18, 29, 47, 0.96);
background-repeat: repeat;
width: 100%;
height: 100%;
text-align: center;
padding: 200px 20px 200px 20px;
}
.div-diviso {
width: 17%;
margin: 10px;
display: inline-block;
position: relative;
box-sizing: border-box;
}
.div-diviso img {
width: 100%;
position: relative;
}
.div-diviso .overlay {
width: 100%;
height: 100%;
position: absolute;
box-sizing: border-box;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.6);
opacity: 0;
transform: scale(0.1);
-webkit-transform: scale(0.1);
-moz-transform: scale(0.1);
-ms-transform: scale(0.1);
-o-transform: scale(0.1);
transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
visibility: hidden;
}
.div-diviso:hover .overlay {
opacity: 1;
transform: scale(1);
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
visibility: visible;
border: 3px solid #ffffff;
transform: border scale3d(0, 1, 1);
}
#media (min-width: 768px) and (max-width: 980px) {
.layer {
text-align: center;
}
.div-diviso {
width: 47%;
margin: 10px;
}
}
#media (max-width: 767px) {
.layer {
text-align: center;
}
.div-diviso {
width: 98%;
margin: 5px;
}
}
<div class="background">
<div class="layer">
<div class="div-diviso">
<img src="http://77.238.26.244:81/confimi/wp-content/uploads/2017/02/SILVIA-FAIT-2017_980.jpg">
<div class="overlay">
</div>
</div>
<div class="div-diviso">
<img src="http://77.238.26.244:81/confimi/wp-content/uploads/2017/02/CLAUDIO-ZAMPARELLI-2017_980.jpg">
<div class="overlay">
</div>
</div>
<div class="div-diviso">
<img src="http://77.238.26.244:81/confimi/wp-content/uploads/2017/02/ROBERTA-MAGNANI-2017_980.jpg">
<div class="overlay">
</div>
</div>
<div class="div-diviso">
<img src="http://77.238.26.244:81/confimi/wp-content/uploads/2017/02/BARBARA-VANNI-2017_980.jpg">
<div class="overlay">
</div>
</div>
<div class="div-diviso">
<img src="http://77.238.26.244:81/confimi/wp-content/uploads/2017/02/SANDRO-CAMPANI-2017_980.jpg">
<div class="overlay">
</div>
</div>
</dvi>
</div>
You cannot animate borders from the middle natively in css. They will auto transition from the starting point of the div (or from the opposite end if you want to use a transform: rotate(180deg)). Hence, the usage of the ::before & ::after elements.
Also, transform: border scale3d(0, 1, 1); is invalid as border is not a CSS3 property applicable to transform.
If you do not want to use the pseudo elements, then you can use a late appearance of the border on the overlay. However it won't animate from the middle.
Modify your css as:
.div-diviso:hover .overlay {
opacity: 1;
transform: scale(1);
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
visibility: visible;
border: 3px solid #ffffff;
transition: border 0.75s;
}
EDIT
If you do want to use the pseudo selectors, apply the following css:
.div-diviso:hover .overlay:before, .div-diviso:hover .overlay:after {
height: 100%;
top: 0;
width: 100%;
left: 0;
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.div-diviso .overlay:before, .div-diviso .overlay:after {
content: '';
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
z-index: 9;
}
.div-diviso .overlay:after {
content: '';
width: 0;
height: 100%;
position: absolute;
top: 0;
left: 50%;
border-top: 3px solid #20bed0;
border-bottom: 3px solid #20bed0;
}
.div-diviso .overlay:before {
width: 100%;
height: 0;
position: absolute;
top: 50%;
left: 0;
border-left: 3px solid #20bed0;
border-right: 3px solid #20bed0;
}
I have an svg inside a button. it has an initial animation and when you hover it'd has another one that reverse that animation to give you the rotation affect.
There is a painting issue in IE11(also on Edge) as shown in that sample that reproduces that issue.
http://jsbin.com/wuricogope/edit?html,css,js,output
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<button>hi
<svg class="icon">
<rect width="10" height="10" style="fill:blue;stroke:pink;stroke-width:5;">
</svg>
</button>
</body>
</html>
styles
* {
box-sizing: border-box;
}
button {
position: relative;
background: #0066a5;
color: #fff;
padding: 20px;
padding-right: 58px;
box-shadow: none;
transition: box-shadow 0.31s cubic-bezier(0.785, 0.135, 0.15, 0.86);
font-weight: 700;
overflow: hidden;
-webkit-appearance: none;
-moz-appearance: none;
border: 0;
box-shadow: none;
}
#keyframes roll-back-rotate {
49% {
transform: translateY(-44px) rotate(0deg);
}
50% {
transform: translateY(28px) rotate(0deg);
opacity: 0;
}
51% {
opacity: 1;
}
}
#keyframes roll-rotate {
49% {
transform: translateY(28px) rotate(0deg);
}
50% {
opacity: 0;
transform: translateY(-44px) rotate(0deg);
}
51% {
opacity: 1;
}
}
.icon {
position: absolute;
width: 10px;
height: 10px;
right: 20px;
top: 50%;
transform: translateY(-50%) rotate(-90deg);
animation: roll .4s forwards;
animation-name: roll-back-rotate;
}
button:hover .icon {
animation-name: roll-rotate;
}
What we did to solve this problem is that we animated top instead of transform:tranlateY()
I'm rotating a div around a circular path with css, and I want to make it change color on hover.
See demo here: http://jsfiddle.net/gg7tnueu/1/
html,
body {
height: 100%;
margin: 0;
}
.planet {
border-radius: 50%;
border: 2px solid #1a1a1a;
position: absolute;
margin: auto;
/*top: 50%;*/
-webkit-animation: orbit 6s infinite linear;
-webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0);
animation: orbit 6s infinite linear;
backface-visibility: hidden;
transform: translateZ(0);
}
.planet.code {
-webkit-transform-origin: 8.5vh 7.875vh;
transform-origin: 8.5vh 7.875vh;
}
.planet.code:hover {
background: red;
}
#-webkit-keyframes orbit {
0% {
-webkit-transform: rotate(0);
}
100% {
-webkit-transform: rotate(360deg);
}
}
#keyframes orbit {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
.ring {
margin: auto;
border-radius: 50%;
border: 2px solid #1a1a1a;
position: relative;
top: 50%;
transform: translateY(-50%);
}
.ring.inner.middle {
width: 75%;
height: 75%;
}
.ring.inner.last {
width: 30%;
height: 30%;
}
#media (orientation: landscape) {
.ring.outer {
width: 75vh;
height: 75vh;
}
.planet {
width: 3.75vh;
height: 3.75vh;
}
}
#media screen and (orientation: portrait) {
.ring.outer {
width: 75vw;
height: 75vw;
}
.planet {
width: 3.75vw;
height: 3.75vw;
left: -1.875vw;
}
}
<div class="ring outer">
<div class="ring inner middle">
<div class="ring inner last">
<div class='planet code'>
</div>
</div>
</div>
</div>
The hover is detected pretty consistently in Firefox (when I add the -moz prefix...), but it's rarely detected in Chrome.
The same thing happens when I add an onclick handler.
Does anyone have any advice to make it work better?
Screenshot of issue
It seems you'll have to use javascript since, as #vals said, the :hover state is not recalculated unless the mouse is moved.
So I have this css3 animation set up that is supposed to scale the div with the class "label" from 0px,47px to 170px,47px when you hover the mouse over the div "house"
Except that it doesn't work, and i have no idea why.
<style type="text/css">
#keyframes labels {
0% {width:0px; height:47px}
100% {width: 170px; height:47px}
}
.hover{
}
.hover:hover{
background-size: contain;
transition: 0.5s ease-in-out;
-webkit-transform: scale(1.1);
transform: scale(1.1);
cursor:pointer;
}
#house{
width: 4em;
height: 4em;
padding: 2em;
background-color: #069;
border: thick solid #FC0;
color: #09C;
text-decoration: underline overline;
position: absolute;
top: 4em;
left: 4em;
}
.label{
position: absolute;
width: 0px;
height: 47px;
background-image: url(tests-02.png);
background-repeat: no-repeat;
top: 5em;
left: 47px;
background-size: 100%;
}
#house:hover .label{
animation:labels;
-webkit-animation:labels;
}
</style>
</head>
<body>
<div id="house" class="hover">TEST</div>
<div class="label"></div>
</body>
The picture won't load because it's local so I filled "label" with a black background instead in the jsfiddle
http://jsfiddle.net/YFRHR/
Your question title is misleading.
You 2 problems:
1) animation syntax, there are missing properties
.hover:hover + .label{
animation: labels 1s infinite;
-webkit-animation: wlabels 1s infinite;
}
2) missing webkit support:
#-webkit-keyframes wlabels {
0% {width:0px; height:47px}
100% {width: 170px; height:47px}
}
#-keyframes labels {
0% {width:0px; height:47px}
100% {width: 170px; height:47px}
}
But the hover per se is working.
update fiddle
This question already has answers here:
Responsive CSS Trapezoid Shape
(2 answers)
Closed 3 years ago.
Does anyone know how to achieve skew like this:
Using CSS's new transform property?
As you can see I'm trying to skew both corners, anyone know if this is possible?
.red.box {
background-color: red;
transform: perspective( 600px ) rotateY( 45deg );
}
Then HTML:
<div class="box red"></div>
from http://desandro.github.com/3dtransforms/docs/perspective.html
CSS:
#box {
width: 200px;
height: 200px;
background: black;
position: relative;
-webkit-transition: all 300ms ease-in;
}
#box:hover {
-webkit-transform: rotate(-180deg) scale(0.8);
}
#box:after, #box:before {
display: block;
content: "\0020";
color: transparent;
width: 211px;
height: 45px;
background: white;
position: absolute;
left: 1px;
bottom: -20px;
-webkit-transform: rotate(-12deg);
-moz-transform: rotate(-12deg);
}
#box:before {
bottom: auto;
top: -20px;
-webkit-transform: rotate(12deg);
-moz-transform: rotate(12deg);
}
HTML:
<div id=box></div>
Works in Chrome and FF 4: http://jsfiddle.net/rudiedirkx/349x9/
This might help: http://jsfiddle.net/rudiedirkx/349x9/2880/
And this too (from Erwinus' comment): http://css-tricks.com/examples/ShapesOfCSS/
I think you mean webkit transform.. please check this URL out
http://www.the-art-of-web.com/css/3d-transforms/ it could help you.
You can use -webkit-perspective and -webkit-transform together.
<div style="-webkit-perspective:300;">
<div style="-webkit-transform:rotate3d(0, 1, 0, 30deg);width:200px;height:200px;background:#D73913;"></div>
</div>
This works only in Safari.
Use this css code. Set the numbers according to your need
-webkit-transform: translateX(16em) perspective(600px) rotateY(10deg);
-moz-transform: translateX(16em) perspective(600px) rotateY(10deg);
-ms-transform: translateX(16em) perspective(600px) rotateY(10deg);
-o-transform: translateX(16em) perspective(600px) rotateY(10deg);
transform: translateX(16em) perspective(600px) rotateY(10deg);
Just in case you want, use matrix 3d.
transform:matrix3d(
1,0,1,0.003,
0,1,0,0,
0,0,1,0,
0,0,0,1);
http://codepen.io/Logo/pen/jEMVpo
.size{
width: 200px;
height: 200px;
}
.boxContainer{
-webkit-perspective:100;
}
.box{
background: blue;
-webkit-transform-origin-x:0;
-webkit-transform: rotateY(10deg);
}
<div class="size boxContainer">
<div class="size box">
</div>
</div>
This worked for me.
2 more methods:
As seen on https://css-tricks.com/examples/ShapesOfCSS/#trapezoid you can use border:
#box {
border-left: 200px solid black;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
width: 0;
height: 100px;
}
but it can't have contents, because it's all border.
Example: http://jsfiddle.net/rudiedirkx/349x9/3112/
Use CSS' actual 'skew' transform:
#box {
width: 200px;
height: 170px;
margin-top: 30px;
background-color: black;
transform: skewY(10deg);
position: relative;
z-index: 1; /* doesn't work? */
}
#box:before {
content: "";
display: block;
width: 200px;
height: 80px;
position: absolute;
bottom: -40px;
left: 0;
background-color: black;
transform: skewY(-20deg);
z-index: -1; /* doesn't work? */
}
I can't seem to position the pseudo element behind the main element though, so the pseudo actually falls over the main element's content, if any.
Example: http://jsfiddle.net/rudiedirkx/349x9/3113/