I need to make precisely this Pyramid-triangle in order to perform animation for this triangle, it becomes very challenging since mine is rotating with X line, but instead I should rotate it with Y line, basically it should rotate or flip to the right side. My main objective is to make it look like in 3D, how to achieve this? or maybe there are some other ways to make this ?
Run the snippet, and please help me what's wrong?
.triangle-pyramid {
transition-property: transform;
transition: 0.6s;
}
.triangle-pyramid:hover {
content:'';
position:absolute;
width:inherit;
height:inherit;
top:50px;
left:-25px;
-webkit-transform-origin: 50% 0% 0;
-moz-transform-origin: 50% 0% 0;
-webkit-transform:rotate3d(1,0,0,-120deg);
-moz-transform:rotate3d(1,0,0,-120deg);
border:1px solid rgb(147,81,166,.5);
display: block;
}
<div>
<img class="triangle-pyramid" src="https://i.stack.imgur.com/J1NxO.png" alt="objectives SMM" >
</div>
Related
Is there a way to make the bar on the conic gradient rotate infinitely in a circle? This is how the gradient looks, I just want it to rotate around the center but everything I have tried hasn't worked.
If I understand what you want, just make sure you have (at least) 3 colours, and the final colour is the same as the first
P.S. I added rotation because wasn't sure what you meant by infinite rotation
div {
position:relative;
height:200px;
overflow:hidden;
aspect-ratio: 1 / 1;
border: solid black 1px;
clip-path: border-box;
}
div::before {
z-index:-1;
content:'';
position:absolute;
inset: -25%;
background-image: conic-gradient(
hsl(297.3, 84.6%, 20.4%),
hsl(192.6, 51.4%, 58.0%),
hsl(297.3, 84.6%, 20.4%)
);
animation: 3s linear infinite rot;
}
#keyframes rot {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}
<div>Hello World</div>
This is an example of the effect I want:
http://photoswipe.com/
The same effect is used for image zooming on WhatsApp web.
I want to zoom elements (not just images) to the center, with an animation scaling element from its position to the center of the page.
The animation should be css based, JS should not be used for animation purposes.
I've tried the following code, which doesn't do the job:
<div></div>
With the css:
div {
width: 100px; height: 100px; background: blue;
transition: transform 1s
}
div:hover {
transform: scale(2);
}
And, what's the difference between animating transform: scale or width/height?
Thanks
EDIT:
Another attempt:
http://jsfiddle.net/4w06Lvms/
I have made something similar to what you want (view in full screen). You can modify it as per needs. Move pointer out of the screen to get back to original state.
Also, animating using scale is better as you might not know the exact height and width in pixels if there are multiple images and using the same scale value gives your code uniformity.
Hope it helps.
html,body{
margin:0;
}
.container{
background:yellow;
display:flex;
width:100vw;
height:100vh;
justify-content:center;
transition: 0.5s ease;
vertical-align:center;
}
.imageHover{
display:flex;
height:300px;
width:200px;
transition: 0.5s ease;
}
img{
position:absolute;
height:300px;
width:200px;
transition: 0.5s ease;
}
.container:hover > .imageHover{
height:100vh;
background-color:black;
width:100vw;
transition: 0.5s ease;
}
.container:hover > .imageHover > img{
transform:translate(240%,50%) scale(1.6);
transition: 0.5s ease;
}
<div class="container">
<div class="imageHover">
<img id="yo" src="https://picsum.photos/200/300
" alt="">
</div>
</div>
You can set the position of the image to fixed, but you will need to know the offset of x and y position of the image, after that start the animation.
In this case the offset x and y are 30px, because I've set parent div padding to 30px.
When the window is scrolled down or right. You have to recalculate the top and left values of the image. For that you'll need JS.
I've set the top and left to the offset values before I've set the position to fixed. Then the image starts moving at the right position.
On photoswipe, they are using a translate3d() function and they are using JS, too. I have no idea what they are doing.
#image {
/* top and left offset */
top: 30px;
left: 30px;
width: 200px;
height: 200px;
transition: top 2s, left 2s, transform 2s;
}
#image:hover {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#offset {
background-color: beige;
height: 1000px;
/* given offset */
padding: 30px;
}
<div id="offset">
<img id="image" src="https://picsum.photos/200/300
" alt="">
</div>
I am using CSS to make an animation with a 2-dimensional sprite sheet. I was able to animate it with the animation property. However, it only animates the character in the same spot, so I want to move the character to create a walking animation from point A to point B and the second row shows the character turns and faces the opposite side and start walking. So for the second row of the sprite, I hope to make the character to maintain his current position after translating 400px from the first row and move 400px back to the starting point. Is there a way for CSS to do this or I have to convert the sprite sheet to 1-dimensional in order to do it or I can use Javascript to do it?
div.c {
background: url("https://blaiprat.github.io/jquery.animateSprite/img/scottpilgrim_multiple.png");
width: 108px;
height: 140px;
animation: x2 1.5s steps(8) infinite, y2 3s steps(2) infinite;
}
#keyframes x2 {
0% {
background-position-x: 0px;
transform: translatex(0px);
}
100% {
background-position-x: -864px;
transform: translatex(400px);
}
}
#keyframes y2 {
0% {
background-position-y: 0px;
}
100% {
background-position-y: -280px;
}
}
<div class="c"></div>
So if I do it this way the animation begins and the first 4 frames in the first row works fine, but when it comes to the second row the image teleports back to the 0px starting point and translates 400px and the character facing the opposite direction walks backward.
You can achieve the animation using only CSS.
A CSS keyframe needs to know where to start and where to end. At 0% is the start, at 100% is the end of the animation.If you want your animation to 'loop' you need to fit the half of the animation inside the first half of the keyframe and the rest of it inside the other half. Also, you have to take in account the sprite's width when calculating the distance you want to travel.
div.c {
border-style: dotted;
border-color: black;
background: url("https://blaiprat.github.io/jquery.animateSprite/img/scottpilgrim_multiple.png");
width: 108px;
height: 140px;
animation: x2 1.5s steps(8) infinite, y2 3s steps(2) infinite;
}
#keyframes x2 {
0% {
background-position-x: 0px;
}
50% {
background-position-x: -864px;
transform: translatex(508px);
}
100% {
background-position-x: 0px;
transform: translatex(0px);
}
}
#keyframes y2 {
0% {
background-position-y: 0px;
}
50% {
background-position-y: -280px;
}
}
<div class="c"></div>
I am currently developing a HTML game for one of my programming classes and I want to add a "game over" screen that will display an image and information on their score before dying.
What I would like to happen is for the image to overlay the body of the page and start small in the middle of the screen and "expand" or zoom into the screen to a specific size. I'm not sure if that's clear but here is what I'm sort of looking for:
But I would like it to zoom in rather than just appear. Any links or help would be greatly appreciated because I don't even know what to search on google to get information on this!
Thanks in advance for any help!
It's really rough but you can do something like this:
JS
var $foo = $('#foo');
grow = function (size) {
if (size < 50) {
console.log(size);
$foo.css('width', size + '%');
$foo.css('height', size + '%');
size++;
setTimeout(grow, 10, size);
}
}
grow(0);
CSS
#foo {
position: fixed;
right: 0;
left: 0;
top:0;
bottom: 0;
margin-left: auto;
margin-right: auto;
margin-top:auto;
margin-bottom:auto;
width: 0%;
height: 0%;
background-color: red;
}
https://jsfiddle.net/a05s1a44/
Change the timeout length to control the speed. Adjust the CSS as needed. Scale the size variable for the dimensions of your box. Change the limit. Do whatever. Should be enough to get you going.
FIDDLE: https://jsfiddle.net/shfv0b3f/
Using transform: scale and transition:
div {
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
}
On game over:
div.zoom {
transform: scale(1);
}
This is what I have made for you and I hope it would help.
basically in a container which it may be the window of your game, I have added the "game over" container you want to show.
The rest of the html is just so you see some false content inside game container:
<div class="container">
<div class="stuff">and here is stuff</div>
<div class="stuff">etc, ect, ect</div>
<div class="stuff">more text</div>
<div class="stuff">and more</div>
<div class="button">Click here</div>
<div class="this-is-your-game-over"></div>
</div>
You can see there's also a class called button that I have used as to trigger the "game over" container zoom effect. In your game development you may use something else to do it.
Then, basically, you will have a "game over" container positioned as this:
.this-is-your-game-over {
position:absolute;
height:0px;
width:0px;
background-color:blue;
right:0;
left:0;
bottom:0;
top:0;
margin: auto;
}
so It is always centered and by jquery:
$(document).ready(function () {
$('.button').click(function () {
$('.this-is-your-game-over').toggleClass("this-is-your-game-over-ADDED");
});
});
When you click on button you add another class to the "game over" container that will make it grow to your desire size with a simple transition:
.this-is-your-game-over-ADDED {
height:80%;
width:50%;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
}
This is the FIDDLE to see verything in action
important: If in your html the this-is-your-game-over div is not at the end of your html you may need to add a positive z-indexto it.
This is perfect use case for CSS transitions and transforms.
Very basically:
#image {
transition: all 0.5s;
}
#image.hidden {
visibility: hidden;
opacity: 0;
transform: scale(0.5);
}
Then you just toggle the .hidden class somehow, probably by JS.
Also, don't forget to add vendor prefixes (or use Autoprefixer).
See http://codepen.io/anon/pen/waaMvM for better example.
I don't know how to make clearer the title of the question.
I have an effect where it shows a text with grey color and with keyframes in css the characters become black with the animate css property.
I wonder how could I acomplish that effect but with an image, transitioning from b&w to color from the left to the right.
This is the code:
<div class="modal">
<h1 id="testid" data-content="THIS IS A TEST">THIS IS A TEST</h1>
</div>
And the CSS:
#-webkit-keyframes loading{
from{max-width:0}
}
#-moz-keyframes loading{
from{max-width:0}
}
#-o-keyframes loading{
from{max-width:0}
}
#keyframes loading{
from{max-width:0}
}
.modal {
background:#fff;
position:fixed;
top:0;
bottom:0;
left:0;
right:0;
z-index:9999999;
}
.modal h1 {
position:absolute;
left:50%;
top:50%;
margin-top:-15px;
margin-left:-125px;
font-size:30px;
text-align:center;
color:rgba(0,0,0,.2);
}
.modal h1:before {
content:attr(data-content);
position:absolute;
overflow:hidden;
color:#000;
max-width:100%;
-webkit-animation:loading 5s;
-moz-animation:loading 5s;
-o-animation:loading 5s;
-ms-animation:loading 5s;
animation:loading 5s;
}
The code running here: http://jsfiddle.net/5Vmnn/
Thank you
Maybe you were thinking of something like this?
Fiddle
It's not greyscale, but it provides a similar effect.
EDIT: Here's a version for Webkit with greyscale using -webkit-filter (still right-to-left...)
I've changed your overlay to use opacity, but the principle is the same:
.modal {
opacity: 0.8;
background:black;
z-index:9999999;
position: absolute;
left: 0;
top: 0;
max-width:0;
-webkit-animation:loading 5s;
-moz-animation:loading 5s;
-o-animation:loading 5s;
-ms-animation:loading 5s;
animation:loading 5s;
width: 100%;
height: 100%;
}
I would make an animated GIF which I think is far easier.
Make 5-10 images each a varying amount b&w and colour and then use ImageMagick to make an animated GIF out of them with a single line like this:
convert -delay 20 -loop 0 *.jpg animated.gif
You may want loop=1 for a single loop, whereas I have it set to zero for infinite looping in the example.
View animated GIF here
In case you are not familiar with Photoshop, I added a Hue Saturation layer and cranked the Saturation down to zero making a black and white image. Then I pressed G for Gradient Tool and drew a horizontal line across the image to specify where the transition is from B&W to colour whilst holding the Shift key to ensure it was horizontal. Then saved it as a 1.jpg and redrew the gradient in a different place and saved it again as 2.jpg and so on.