The following code renders a perfect rotating circle in safari, but not in chrome.
<style>
.circle{
height:1000px;
width:1000px;
background-color:#000;
border-radius: 50%;
}
#-webkit-keyframes rotating {
from{
-webkit-transform: rotate(0deg);
}
to{
-webkit-transform: rotate(360deg);
}
}
.rotating {
-webkit-animation: rotating 2s linear infinite;
-webkit-transform-origin: center;
}
</style>
<div class="circle rotating">
</div>
http://jsfiddle.net/p4ban9cs/
It does not renders perfectly, the problem is visible when rotating a big circle, it's like a wiggling circle on chrome.
thank you for help.
Adding an outer element as a wrapper and apply same styling to it, to mask the inner circle rotation as seen in this Fiddle
<div class="overlay">
<div class="circle rotating">Test</div>
</div>
.overlay{
height:1000px;
width:1000px;
box-shadow:0 0 0 10px #000 ;
background:black;
border-radius: 50%;
}
Related
If you use animation effect before mix-blend-mode property you will not get mix blend mode.
Once you remove the animation class or disable animation, then mix-blend-mode will work.
What is the problem? I spent hours to solve just this simple thing. Please, help
.box {
background-color:yellow;
overflow:hidden;
border-radius:10px;
}
.box img{ mix-blend-mode:multiply}
.animate{
border:1px solid red;
width:30px; height:30px;
animation: spin 2s infinite linear;
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(1turn); }
}
<div class="animate">123</div>
<div class="box">
<img src="https://placeimg.com/400/200/animals" alt="">
</div>
mix blend should take effect anyway
In the old times, adding a transform translateZ(0px) used to solve a lot of problems.
At least in my Chrome, seems to still be the case:
.box {
background-color:yellow;
overflow:hidden;
border-radius:10px;
transform: translateZ(0px); /* added */
}
.box img{ mix-blend-mode:multiply}
.animate{
border:1px solid red;
width:30px; height:30px;
animation: spin 2s infinite linear;
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(1turn); }
}
<div class="animate">123</div>
<div class="box">
<img src="https://placeimg.com/400/200/animals" alt="">
</div>
Adding mix-blend-mode to the parent element also, solves the issue.
.box {
background-color:yellow;
overflow:hidden;
border-radius:10px;
mix-blend-mode:multiply;
}
.box img{ mix-blend-mode:multiply;}
.animate{
border:1px solid red;
border-radius: 1rem;
width:2rem;
height:2rem;
animation: spin 2s infinite linear;
display:flex;
align-items: space-around;
align-content: stretch;
justify-content: space-around;
}
#keyframes spin {
0% { transform: rotate(0deg); background-color: aqua; }
50% { background-color: yellow; }
100% { transform: rotate(1turn); background-color: aqua; }
}
<div class="animate">•</div>
<div class="box">
<img src="https://placeimg.com/400/200/animals" alt="">
</div>
In this problem, animate's stack order is between box and img because animate use keyframe.I think keyframe change animate's stack order.So,Img cannot blend in box.We can change element's stack order by using z-index.
Solution is img must within box.We have two options.Results will be different where you use z-index.
First option, we can change animate's stack order in animate class.
`
.animate{
position:relative;
z-index:2;
}
`
Result - animate will be front of box with img.
Second option, we can change box's stack order in box class.
`
.box{
position:relative;
z-index:2;
}
`
Result - box with img will be front of animate.
.box {
background-color:yellow;
overflow:hidden;
border-radius:10px;
}
.box img{ mix-blend-mode:multiply}
.animate{
border:1px solid red;
width:30px; height:30px;
position:relative;
z-index:2;
animation: spin 2s infinite linear;
}
#keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(1turn); }
}
<div class="animate">123</div>
<div class="box">
<img src="https://placeimg.com/400/200/animals" alt="">
</div>
I have a circle logo, with text on the outside, and a small circle in the middle. I plan to make the logo spin using some CSS3. That's relatively easily.
The tricky bit is that I want to make the logo change to BLACK when it's over a pink div, and change to WHITE as it moves over the black part...
I think this is achieved with a mask or a filter, but I just cannot work out how to do it...
I've setup a codepen with a basic example:
https://codepen.io/anon/pen/JQYQdp
<div class="main-header">
<div class="spinning">
<img src="https://i.ibb.co/pKVwqhY/test-logo.png" alt="test-logo" border="0">
</div>
</div>
<div class="pink">
</div>
CSS:
.main-header {
width:100%;
background-color:black;
height:200px;
}
.pink {
width:100%;
background-color:pink;
height:200px;
}
.spinning {
position:absolute;
z-index:2000;
height:200px;
width:200px;
top:100px;
right:0;
-webkit-animation:spin 4s linear infinite;
-moz-animation:spin 4s linear infinite;
animation:spin 4s linear infinite;
}
#-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
#-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
#keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
As the text of the image spins over the PINK background, I want that part of the text to be black, whilst the top half is still white...
mix-blend-mode will get you most of the way.
The mix-blend-mode CSS property sets how an element's content should blend with the content of the element's parent and the element's background.
MDN
.main-header {
width: 100%;
background-color: black;
height: 200px;
}
.pink {
width: 100%;
background-color: pink;
height: 200px;
}
.spinning {
mix-blend-mode: difference;
position: absolute;
z-index: 2000;
height: 200px;
width: 200px;
top: 100px;
right: 10px;
-webkit-animation: spin 4s linear infinite;
-moz-animation: spin 4s linear infinite;
animation: spin 4s linear infinite;
}
#-moz-keyframes spin {
100% {
-moz-transform: rotate(360deg);
}
}
#-webkit-keyframes spin {
100% {
-webkit-transform: rotate(360deg);
}
}
#keyframes spin {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
<div class="main-header">
<div class="spinning">
<img src="https://i.ibb.co/pKVwqhY/test-logo.png" alt="test-logo" border="0">
</div>
</div>
<div class="pink">
</div>
Have a box with some text inside. When I hover it, I want to scale / zoom it bigger with an animation. When the animation ends, the blurred effect is removed from the container. Is there anyway to remove the blur effect after the transition ?
The Code (http://codepen.io/ptongalex/pen/dNZdmV):
.box {
border: solid red 2px;
width: 100px;
position:relative;
text-align:center;
left: 50%;
top:200px;
}
.box:hover {
-webkit-filter: blur(0);
-webkit-transform: translateZ(0);
transform: scale(3);
transition: transform 1s;
}
<div class='box'>
<h1>Text</h1>
</div>
One solution could be to start you box as big and then have it scaled down to your desired size. When you then hover the box you scale it up to 1. This way you prevent the box and its content from being pixelated/blurry when scaling:
.box {
border: solid red 6px;
width: 300px;
position:relative;
text-align:center;
font-size: 54px;
transform: scale(0.33);
margin: 0 auto;
transition: transform 1s;
}
.box:hover {
transform: scale(1);
}
<div class='box'>
<h1>Text</h1>
</div>
This should work.
filter: none;
-webkit-filter: blur(0);
-moz-filter: blur(0);
-ms-filter: blur(0);
filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='0');
But in some cases the element will be blurred during animation if you use transition.
I'm struggling with the following situation: I have an element which has a clip path to mask it's content. This is later used for an animation, revealing the content. However, there's another element inside which has an animation of it's own, which is not being masked due to the animation.
Have a look here: https://jsfiddle.net/wne2z1m4/
So basically: -webkit-clip-path:inset(-10% 50% 98% 50%); and animation:animation 1s linear 0s infinite; don't seem to be working well together. If you disable the animation on the button element, you can see it will be masked by the container.
Does anyone know if there's a way to keep the button element animating, but also have it masked?
Thanks!
Just add
overflow: hidden;
In the example below I've made some additional changes to make example more clear, but you don't need them. Just add overflow to element with clip-path.
.foo {
outline: 1px dotted red;
}
.bar {
padding:30px;
background: silver;
-webkit-clip-path: inset(1em 1em 1em 2em);
clip-path: inset(1em 1em 1em 2em);
overflow: hidden;
}
.button {
display:inline-block;
background:red;
animation: animation 1s linear 0s infinite;
}
#keyframes animation {
0% { transform: translateY(50px); }
50% { transform: translateY(0); }
100% { transform: translateY(50px); }
}
<div class="foo">
<div class="bar">
<div class="button">
Test
</div>
</div>
</div>
I am trying to make a CSS tetrahedron, so I have tackled the problem by doing some CSS3 triangles and activating the 3D transformations with the perspective property.
But I have some issues to wrap my mind over all the transformations, here is some of my code:
.navbar-brand-logo {
width: 64px;
height: 64px;
transform-style: preserve-3d;
perspective: 600px;
position: relative;
}
.face {
width: 0;
height: 0;
position: absolute;
border-style: solid;
border-width: 64px 32px 0 32px;
transform-origin: 0 0;
border-color: transparent transparent transparent rgba(50, 50, 50, 0.6);
}
.logo-base-left {
transform: rotateX(180deg) translateY(-64px);
}
.logo-base-right {
transform: rotateY(180deg) rotateX(180deg) translateY(-64px);
}
.logo-up {
border-color: transparent transparent transparent rgba(50, 50, 50, 0.8);
transform: rotateY(180deg) scaleY(0.5) translateY(-64px);
}
.logo-down-up {
border-color: transparent transparent transparent rgba(50, 50, 50, 0.9);
border-width: 64px 0 0px 4px;
transform: scaleX(128px) translateZ(0px);
}
<section class="navbar-brand-logo">
<figure class="face logo-base-left"></figure>
<figure class="face logo-base-right"></figure>
<figure class="face logo-up"></figure>
<figure class="face logo-down-up"></figure>
</section>
I am having issues to imagine how can I make the two other faces (the left up one and the right one).
Here is a CodePen which illustrate the current attempt:
Furthermore, is it a good idea to use a CSS3 tetrahedron as a logo?
Would it be better if it was an SVG?
WebGL / Canvas is a no-no due to browser support.
Here are a few steps describing an approach to make a responsive tetrahedron: demo - responsive tetrahedron.
link to animation
Step 1 the faces:
A tetrahedron has 4 triangular faces. Each face is an equilateral triangle.
In the following example, I used the clip-path property to make the 4 equilateral triangles:
.tetra{
position:relative;
width:20%;
padding-bottom:17.32%; /* height of equilateral triangle = sin60° * width */
margin:0 auto;
}
.tetra div{
position:absolute;
top:0;left:0;
width:100%; height:100%;
-webkit-clip-path:polygon(50% 0, 100% 100%, 0% 100%);
clip-path:polygon(50% 0, 100% 100%, 0% 100%);
background:teal;
}
.tetra .face2{
transform-origin:0% 100%;
transform:rotate(-60deg);
background:gold;
}
.tetra .face3{
transform-origin:100% 100%;
transform:rotate(60deg);
background:darkorange;
}
.tetra .face4{
transform-origin:50% 100%;
transform:rotate(180deg);
background:pink;
}
<div class="tetra">
<div class="face1"></div>
<div class="face2"></div>
<div class="face3"></div>
<div class="face4"></div>
</div>
Step 2 make it 3d
For this, we rotate each face separately in the 3d environment with perspective and transform-style:
body{
perspective:9000px;
}
.tetra{
position:relative;
width:20%;
padding-bottom:17.32%; /* height of equilateral triangle = sin60° * width */
margin:0 auto;
transform-style:preserve-3d;
}
.tetra div{
position:absolute;
top:0;left:0;
width:100%; height:100%;
-webkit-clip-path:polygon(50% 0, 100% 100%, 0% 100%);
clip-path:polygon(50% 0, 100% 100%, 0% 100%);
background:teal;
transform-style:preserve-3d;
}
/* Rotation of –109.5° is angle(C, M[AB], D), per http://www.f-lohmueller.de/pov_tut/geo/geom_200e.htm, 180° – atan(2 * sqrt(2)) ≈ 109.5° */
.tetra .face2{
transform-origin:0% 100%;
transform:rotate(-60deg) rotatex(-109.5deg);
background:gold;
}
.tetra .face3{
transform-origin:100% 100%;
transform:rotate(60deg) rotatex(-109.5deg);
background:darkorange;
}
.tetra .face4{
transform-origin:50% 100%;
transform:rotate(180deg) rotatex(-109.5deg);
background:pink;
}
<div class="tetra">
<div class="face1"></div>
<div class="face2"></div>
<div class="face3"></div>
<div class="face4"></div>
</div>
At this point, you have a tetrahedron but you can only see 3 face so to see the whole 3d shape:
Step 3 make it rotate!
Top see the whole tetrahedron, you need to rotate it with a transition or keyframe animation :
body{
perspective:9000px;
padding-top:10%;
}
.tetra{
position:relative;
width:20%;
padding-bottom:17.32%; /* height of equilateral triangle = sin60° * width */
margin:0 auto;
transform-style:preserve-3d;
transform:rotatex(90deg) rotateY(0deg) rotatez(0deg);
animation: rotate 10s linear infinite;
}
.tetra div{
position:absolute;
top:0;left:0;
width:100%; height:100%;
-webkit-clip-path:polygon(50% 0, 100% 100%, 0% 100%);
clip-path:polygon(50% 0, 100% 100%, 0% 100%);
background:teal;
transform-style:preserve-3d;
}
/* Rotation of –109.5° is angle(C, M[AB], D), per http://www.f-lohmueller.de/pov_tut/geo/geom_200e.htm, 180° – atan(2 * sqrt(2)) ≈ 109.5° */
.tetra .face2{
transform-origin:0% 100%;
transform:rotate(-60deg) rotatex(-109.5deg);
background:gold;
}
.tetra .face3{
transform-origin:100% 100%;
transform:rotate(60deg) rotatex(-109.5deg);
background:darkorange;
}
.tetra .face4{
transform-origin:50% 100%;
transform:rotate(180deg) rotatex(-109.5deg);
background:pink;
}
#keyframes rotate{
50%{transform:rotatex(100deg) rotateY(10deg) rotatez(180deg);}
100%{transform:rotatex(90deg) rotateY(0deg) rotatez(360deg);}
}
<div class="tetra">
<div class="face1"></div>
<div class="face2"></div>
<div class="face3"></div>
<div class="face4"></div>
</div>
Note that this uses properties that aren't supported by all browsers, especialy clip-path that is only supported by chrome. This property is used to make the equilateral triangles and you can use other approaches (see here).
For browser support and vendor prefixes, also see canIuse for:
clip-path
3d transforms
CSS animations
If you want to animate the logo (once, on hover, doesn't matter), then going with 3D CSS is probably a good idea.
With SVG, you would get better browser support, faster rendering, and easier control over the shape, so if you're not animating the logo I'd suggest going with SVG.
For building the shape of a tetrahedron in 3D, check out Ana Tudor's codepen, this is but one of many tetrahedron examples she's made: http://codepen.io/thebabydino/pen/vFrHx – you can play with the animation rot in this pen to get an idea of how to rotate / animate it.
In organic molecules tetrahedra are often related helices, f.e.:
Boerdijk–Coxeter helix. So it would be nice to write code to show this helix.
Here is javascript for the helix:
var s set equal to the sides of the square canvas
var a=s/6, b=s/9;
c.beginPath();
for (var i=0; i<2*Math.PI; i+=0.01){
x=s/4+a*Math.cos(i)-b*Math.sin(i);
y=3*s/4+a*Math.cos(i)+b*Math.sin(i);
if(i==0) {c.moveTo(x,y);} else {c.lineTo(x,y);}
}
c.lineWidth=1;
c.strokeStyle="#0f6";
c.stroke();