проблема в трансформации (CSS3)

Георгий123 · August 3, 2014

Всем привет! Случилась проблема, нужно что бы свойство transition плавно трансформировало таблицу не только по горизонтали (width) но и по вертикали вниз (height). Перепробовал в свойство transition и #wrap1 приписывать функцию height, но по вертикали переходит очень резко, а нужно плавно. Спасибо за внимание.

вот исходник:

<html>

#wrap1

{

border:1px #000 solid;

width:200px;

padding:10px;

font-size:1.5em;

transition: width 4s, height 4s;

}

#wrap1:hover

{

width:500px;

height: 300px;

}

</style>

<body>

</body>

</html>

Galaxy · August 3, 2014

#wrap1

{

min-height:1px;

border:1px #000 solid;

width:200px;

padding:10px;

font-size:1.5em;

transition: width 4s, min-height 4s;

}

#wrap1:hover

{

width:500px;

min-height: 300px;

}

как вариант

Edited August 3, 2014 by Galaxy

Георгий123 · August 4, 2014

спасибо!!!

Георгий123 · August 15, 2014

скажите, как сделать так, что бы таблица перемещалась в лево? Пробовал свойству width и height придать отрицательное свойство, но тогда таблица просто не работает.

Great Rash · August 15, 2014

Или margin в нужную сторону, или связка position: relative; + left в нужную сторону

Георгий123 · August 15, 2014

простите, я не понял, куда нужно вставлять margin?

Great Rash · August 15, 2014

В стиль для таблицы. Вы же таблицу анимируете так?

Георгий123 · August 15, 2014

вставил, все равно не трансформируется в левую сторону.

<html>

<head>

#wrap1

{

margin: left;

min-height:1px;

border:1px #000 solid;

width:200px;

padding:10px;

font-size:1.5em;

transition: width 3s, min-height 3s;

position: absolute;

top:240px;

left:683px;

}

#wrap1:hover

{

width:500px;

min-height:300px;

}

</style>

</head>

<body>

</body>

</html>

Galaxy · August 15, 2014

В этом и вся проблема, вы не знаете самых азов, а лезете в css3, http://htmlbook.ru/css/margin . И в принцип работы transition вы тоже не особо хотите вникать.

#wrap1

{

min-height:1px;

border:1px #000 solid;

width:200px;

padding:10px;

font-size:1.5em;

transition: width 3s, min-height 3s,margin-left 3s;

margin-left:0;

background:red;

}

#wrap1:hover

{

margin-left:100px;

width:500px;

min-height:300px;

}

Edited August 15, 2014 by Galaxy

Георгий123 · August 15, 2014

В этом и вся проблема, вы не знаете самых азов, а лезете в css3, http://htmlbook.ru/css/margin . И в принцип работы transition вы тоже не особо хотите вникать.

#wrap1
{

min-height:1px;
border:1px #000 solid;
width:200px;
padding:10px;
font-size:1.5em;
transition: width 3s, min-height 3s,margin-left 3s;
margin-left:0;
background:red;
}
#wrap1:hover
{
margin-left:100px;
width:500px;
min-height:300px;
}

Не я не это имел ввиду, нужно что бы таблица не задвигалась обратно, а распускалась в левую сторону, а не в правую. Точно также как и сейчас только в зеркальном отражении.

Galaxy · August 15, 2014

скажите, как сделать так, что бы таблица перемещалась в лево , это ж не я писал, конкретный пример покажите как вы хотите что б оно работало

Георгий123 · August 15, 2014

точно также, только в зеркальном отражении.

<html>

<head>

#wrap1

{

margin: left;

min-height:1px;

border:1px #000 solid;

width:200px;

padding:10px;

font-size:1.5em;

transition: width 3s, min-height 3s;

position: absolute;

top:240px;

left:683px;

}

#wrap1:hover

{

width:500px;

min-height:300px;

}

</style>

</head>

<body>

</body>

</html>

Great Rash · August 15, 2014

margin: left;

Sign In

проблема в трансформации (CSS3)

Question

Link to comment

Share on other sites

12 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information