CSS Transform like open doorSet cellpadding and cellspacing in CSS?How do I give text or an image a transparent background using CSS?Is there a CSS parent selector?When to use margin vs padding in CSSChange an HTML5 input's placeholder color with CSSHow can I transition height: 0; to height: auto; using CSS?How do CSS triangles work?How do I vertically center text with CSS?Is it possible to apply CSS to half of a character?In CSS Flexbox, why are there no “justify-items” and “justify-self” properties?
Has Darkwing Duck ever met Scrooge McDuck?
Open a doc from terminal, but not by its name
How do ground effect vehicles perform turns?
anything or something to eat
Journal losing indexing services
Query about absorption line spectra
Fuse symbol on toroidal transformer
Will adding a BY-SA image to a blog post make the entire post BY-SA?
A Permanent Norse Presence in America
Varistor? Purpose and principle
Is it improper etiquette to ask your opponent what his/her rating is before the game?
How do we rationalize a person's sins being solely their own when we have traditions that blame entire nations for certain acts?
Python script not running correctly when launched with crontab
Gibbs free energy in standard state vs. equilibrium
Do the concepts of IP address and network interface not belong to the same layer?
Is camera lens focus an exact point or a range?
Why we can't differentiate a polynomial equation as many times as we wish?
Can I sign legal documents with a smiley face?
Can I use my Chinese passport to enter China after I acquired another citizenship?
Can not upgrade Kali,not enough space in /var/cache/apt/archives
How do you respond to a colleague from another team when they're wrongly expecting that you'll help them?
Indicating multiple different modes of speech (fantasy language or telepathy)
Can the Supreme Court overturn an impeachment?
How to decide convergence of Integrals
CSS Transform like open door
Set cellpadding and cellspacing in CSS?How do I give text or an image a transparent background using CSS?Is there a CSS parent selector?When to use margin vs padding in CSSChange an HTML5 input's placeholder color with CSSHow can I transition height: 0; to height: auto; using CSS?How do CSS triangles work?How do I vertically center text with CSS?Is it possible to apply CSS to half of a character?In CSS Flexbox, why are there no “justify-items” and “justify-self” properties?
I'm trying to create an animation of opening and closing the door
But somewhere I made a mistake
Left top corner and left bottom corner look not like i want
maybe someone knows what the problem is
Here is my code
.container
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
.flipbox
height: 420px;
width: 240px;
border: 18px solid grey;
.flipbox-active
height: 420px;
width: 240px;
background-color: #000;
.flipbox-active:hover
transform: perspective(1200px) rotateY(40deg) translateX(-10%);
transition: .45s;
<div class="container">
<div class="flipbox">
<div class="flipbox-active">
</div>
</div>
</div>css css-transitions css-transforms
edited Mar 21 at 14:15
Temani Afif
80.1k94692
asked Mar 21 at 13:51
Евгений ТимченкоЕвгений Тимченко
253
add a comment |
I'm trying to create an animation of opening and closing the door
But somewhere I made a mistake
Left top corner and left bottom corner look not like i want
maybe someone knows what the problem is
Here is my code
.container
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
.flipbox
height: 420px;
width: 240px;
border: 18px solid grey;
.flipbox-active
height: 420px;
width: 240px;
background-color: #000;
.flipbox-active:hover
transform: perspective(1200px) rotateY(40deg) translateX(-10%);
transition: .45s;
<div class="container">
<div class="flipbox">
<div class="flipbox-active">
</div>
</div>
</div>css css-transitions css-transforms
edited Mar 21 at 14:15
Temani Afif
80.1k94692
asked Mar 21 at 13:51
Евгений ТимченкоЕвгений Тимченко
253
add a comment |
I'm trying to create an animation of opening and closing the door
But somewhere I made a mistake
Left top corner and left bottom corner look not like i want
maybe someone knows what the problem is
Here is my code
.container
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
.flipbox
height: 420px;
width: 240px;
border: 18px solid grey;
.flipbox-active
height: 420px;
width: 240px;
background-color: #000;
.flipbox-active:hover
transform: perspective(1200px) rotateY(40deg) translateX(-10%);
transition: .45s;
<div class="container">
<div class="flipbox">
<div class="flipbox-active">
</div>
</div>
</div>css css-transitions css-transforms
edited Mar 21 at 14:15
Temani Afif
80.1k94692
asked Mar 21 at 13:51
Евгений ТимченкоЕвгений Тимченко
253
I'm trying to create an animation of opening and closing the door
But somewhere I made a mistake
Left top corner and left bottom corner look not like i want
maybe someone knows what the problem is
Here is my code
.container
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
.flipbox
height: 420px;
width: 240px;
border: 18px solid grey;
.flipbox-active
height: 420px;
width: 240px;
background-color: #000;
.flipbox-active:hover
transform: perspective(1200px) rotateY(40deg) translateX(-10%);
transition: .45s;
<div class="container">
<div class="flipbox">
<div class="flipbox-active">
</div>
</div>
</div>.container
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
.flipbox
height: 420px;
width: 240px;
border: 18px solid grey;
.flipbox-active
height: 420px;
width: 240px;
background-color: #000;
.flipbox-active:hover
transform: perspective(1200px) rotateY(40deg) translateX(-10%);
transition: .45s;
<div class="container">
<div class="flipbox">
<div class="flipbox-active">
</div>
</div>
</div>.container
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
.flipbox
height: 420px;
width: 240px;
border: 18px solid grey;
.flipbox-active
height: 420px;
width: 240px;
background-color: #000;
.flipbox-active:hover
transform: perspective(1200px) rotateY(40deg) translateX(-10%);
transition: .45s;
<div class="container">
<div class="flipbox">
<div class="flipbox-active">
</div>
</div>
</div>css css-transitions css-transforms
css css-transitions css-transforms
edited Mar 21 at 14:15
Temani Afif
80.1k94692
asked Mar 21 at 13:51
Евгений ТимченкоЕвгений Тимченко
253
edited Mar 21 at 14:15
Temani Afif
80.1k94692
asked Mar 21 at 13:51
Евгений ТимченкоЕвгений Тимченко
253
edited Mar 21 at 14:15
Temani Afif
80.1k94692
edited Mar 21 at 14:15
Temani Afif
80.1k94692
edited Mar 21 at 14:15
Temani Afif
80.1k94692
80.1k94692
asked Mar 21 at 13:51
Евгений ТимченкоЕвгений Тимченко
253
asked Mar 21 at 13:51
Евгений ТимченкоЕвгений Тимченко
253
asked Mar 21 at 13:51
Евгений ТимченкоЕвгений Тимченко
253
253
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
Add transform-origin: left
.container
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
.flipbox
height: 420px;
width: 240px;
border: 18px solid grey;
.flipbox-active
height: 420px;
width: 240px;
background-color: #000;
transform-origin: left;
transition: transform .45s;
.flipbox-active:hover
transform: perspective(1200px) rotateY(40deg);
<div class="container">
<div class="flipbox">
<div class="flipbox-active">
</div>
</div>
</div>answered Mar 21 at 13:55
flppvflppv
1,686928
1
it works tu so much
– Евгений Тимченко
Mar 21 at 14:38
add a comment |
You are almost good, simply adjust the origin instead of adding a translation:
.container
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
.flipbox
height: 420px;
width: 240px;
border: 18px solid grey;
.flipbox-active
height: 420px;
width: 240px;
background-color: #000;
transform-origin:left;
.flipbox-active:hover
transform: perspective(1200px) rotateY(40deg);
transition: .45s;
<div class="container">
<div class="flipbox">
<div class="flipbox-active">
</div>
</div>
</div>answered Mar 21 at 13:55
Temani AfifTemani Afif
80.1k94692
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55281979%2fcss-transform-like-open-door%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
Add transform-origin: left
.container
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
.flipbox
height: 420px;
width: 240px;
border: 18px solid grey;
.flipbox-active
height: 420px;
width: 240px;
background-color: #000;
transform-origin: left;
transition: transform .45s;
.flipbox-active:hover
transform: perspective(1200px) rotateY(40deg);
<div class="container">
<div class="flipbox">
<div class="flipbox-active">
</div>
</div>
</div>answered Mar 21 at 13:55
flppvflppv
1,686928
1
it works tu so much
– Евгений Тимченко
Mar 21 at 14:38
add a comment |
Add transform-origin: left
.container
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
.flipbox
height: 420px;
width: 240px;
border: 18px solid grey;
.flipbox-active
height: 420px;
width: 240px;
background-color: #000;
transform-origin: left;
transition: transform .45s;
.flipbox-active:hover
transform: perspective(1200px) rotateY(40deg);
<div class="container">
<div class="flipbox">
<div class="flipbox-active">
</div>
</div>
</div>answered Mar 21 at 13:55
flppvflppv
1,686928
1
it works tu so much
– Евгений Тимченко
Mar 21 at 14:38
add a comment |
Add transform-origin: left
.container
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
.flipbox
height: 420px;
width: 240px;
border: 18px solid grey;
.flipbox-active
height: 420px;
width: 240px;
background-color: #000;
transform-origin: left;
transition: transform .45s;
.flipbox-active:hover
transform: perspective(1200px) rotateY(40deg);
<div class="container">
<div class="flipbox">
<div class="flipbox-active">
</div>
</div>
</div>answered Mar 21 at 13:55
flppvflppv
1,686928
Add transform-origin: left
.container
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
.flipbox
height: 420px;
width: 240px;
border: 18px solid grey;
.flipbox-active
height: 420px;
width: 240px;
background-color: #000;
transform-origin: left;
transition: transform .45s;
.flipbox-active:hover
transform: perspective(1200px) rotateY(40deg);
<div class="container">
<div class="flipbox">
<div class="flipbox-active">
</div>
</div>
</div>.container
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
.flipbox
height: 420px;
width: 240px;
border: 18px solid grey;
.flipbox-active
height: 420px;
width: 240px;
background-color: #000;
transform-origin: left;
transition: transform .45s;
.flipbox-active:hover
transform: perspective(1200px) rotateY(40deg);
<div class="container">
<div class="flipbox">
<div class="flipbox-active">
</div>
</div>
</div>.container
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
.flipbox
height: 420px;
width: 240px;
border: 18px solid grey;
.flipbox-active
height: 420px;
width: 240px;
background-color: #000;
transform-origin: left;
transition: transform .45s;
.flipbox-active:hover
transform: perspective(1200px) rotateY(40deg);
<div class="container">
<div class="flipbox">
<div class="flipbox-active">
</div>
</div>
</div>answered Mar 21 at 13:55
flppvflppv
1,686928
answered Mar 21 at 13:55
flppvflppv
1,686928
answered Mar 21 at 13:55
flppvflppv
1,686928
answered Mar 21 at 13:55
flppvflppv
1,686928
1,686928
1
it works tu so much
– Евгений Тимченко
Mar 21 at 14:38
add a comment |
1
it works tu so much
– Евгений Тимченко
Mar 21 at 14:38
1
1
it works tu so much
– Евгений Тимченко
Mar 21 at 14:38
it works tu so much
– Евгений Тимченко
Mar 21 at 14:38
add a comment |
You are almost good, simply adjust the origin instead of adding a translation:
.container
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
.flipbox
height: 420px;
width: 240px;
border: 18px solid grey;
.flipbox-active
height: 420px;
width: 240px;
background-color: #000;
transform-origin:left;
.flipbox-active:hover
transform: perspective(1200px) rotateY(40deg);
transition: .45s;
<div class="container">
<div class="flipbox">
<div class="flipbox-active">
</div>
</div>
</div>answered Mar 21 at 13:55
Temani AfifTemani Afif
80.1k94692
add a comment |
You are almost good, simply adjust the origin instead of adding a translation:
.container
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
.flipbox
height: 420px;
width: 240px;
border: 18px solid grey;
.flipbox-active
height: 420px;
width: 240px;
background-color: #000;
transform-origin:left;
.flipbox-active:hover
transform: perspective(1200px) rotateY(40deg);
transition: .45s;
<div class="container">
<div class="flipbox">
<div class="flipbox-active">
</div>
</div>
</div>answered Mar 21 at 13:55
Temani AfifTemani Afif
80.1k94692
add a comment |
You are almost good, simply adjust the origin instead of adding a translation:
.container
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
.flipbox
height: 420px;
width: 240px;
border: 18px solid grey;
.flipbox-active
height: 420px;
width: 240px;
background-color: #000;
transform-origin:left;
.flipbox-active:hover
transform: perspective(1200px) rotateY(40deg);
transition: .45s;
<div class="container">
<div class="flipbox">
<div class="flipbox-active">
</div>
</div>
</div>answered Mar 21 at 13:55
Temani AfifTemani Afif
80.1k94692
You are almost good, simply adjust the origin instead of adding a translation:
.container
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
.flipbox
height: 420px;
width: 240px;
border: 18px solid grey;
.flipbox-active
height: 420px;
width: 240px;
background-color: #000;
transform-origin:left;
.flipbox-active:hover
transform: perspective(1200px) rotateY(40deg);
transition: .45s;
<div class="container">
<div class="flipbox">
<div class="flipbox-active">
</div>
</div>
</div>.container
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
.flipbox
height: 420px;
width: 240px;
border: 18px solid grey;
.flipbox-active
height: 420px;
width: 240px;
background-color: #000;
transform-origin:left;
.flipbox-active:hover
transform: perspective(1200px) rotateY(40deg);
transition: .45s;
<div class="container">
<div class="flipbox">
<div class="flipbox-active">
</div>
</div>
</div>.container
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
.flipbox
height: 420px;
width: 240px;
border: 18px solid grey;
.flipbox-active
height: 420px;
width: 240px;
background-color: #000;
transform-origin:left;
.flipbox-active:hover
transform: perspective(1200px) rotateY(40deg);
transition: .45s;
<div class="container">
<div class="flipbox">
<div class="flipbox-active">
</div>
</div>
</div>answered Mar 21 at 13:55
Temani AfifTemani Afif
80.1k94692
answered Mar 21 at 13:55
Temani AfifTemani Afif
80.1k94692
answered Mar 21 at 13:55
Temani AfifTemani Afif
80.1k94692
answered Mar 21 at 13:55
Temani AfifTemani Afif
80.1k94692
80.1k94692
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55281979%2fcss-transform-like-open-door%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
