ReSQL.ru
     
powered by simpleCommunicator - 2.0.59     © 2025 Programmizd 02
Мобильная версия    Контакт    Правила    FAQ    Помощь
Целевая тема:
Создать новую тему:
Автор:
Закрыть
Цитировать
Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Помогите решить задачу одним дивом
10 сообщений из 10, страница 1 из 1
Помогите решить задачу одним дивом
    #39192654
Imperous
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Imperous
Участник
Всем приветы!

Ломал голову и так не получилось с помощью ::befor и ::after повернуть нормально див.
Тут пример того что я хочу, но с кучей дивов.
исходник
 

<html>
<head>
<meta charset="utf-8">
<style>
.box{
width : 300px;
height: 400px;
display : inline-block;
margin-left: 20px;
}

.rotate{
position : relative;
z-index: 100;
left : 0px;
top : 0px;
width : 100%;
height: 100%;
transform: rotate(0.5deg);
background-color: #708090;
}

.use{
position : absolute;
left : 2px;
top : 2px;
width : 276px;
height: 376px;
padding : 10px;
overflow-y: auto;
background-color: white;
transform: rotate(-0.5deg);

}
</style>

</head>
<body>
<div class="box">
<div class="rotate">
<div class="use">dg dg df пва пвап авп fds ролыв лоыв ролывр лывра лывлоа ролыв ралоывр аолывра олвыра олыв ра jsdhf олывар олывраолывар олвыар лвыор аловыар лоыварлоывра олывра лоырва рыашцугарушцга hiweu fhiweuf hiuweh fiuwefhiweu fhiuwe рашгцу аршгцуар iuwefh iuwehf iuwehifu рцушгаршцуг аргшц ы ролыврпловаплварлп орвалпо ваолп рвлаоп рваолп ровла пролвап рловапр пгуцнр 9hger9uhg udnxckj nxckjvniurhiurehgieruhiuerh uiheiru huierh iuerh iuerh iuehriuhieruh ruih ruihruiehiuheih owh 9wh rpwepr wep карзшцуашзывар а7834ан3нук арвгшаргшуарукгш ашугра iueyf43 huh iudr
</div>
</div>
</div>
<div class="box">
<div class="rotate">
<div class="use">
</div>
</div>
</div>

</body>
</html>
...
Рейтинг: 0 / 0
15.03.2016, 18:52
| Ответить | Цитировать | Написать  
Помогите решить задачу одним дивом
    #39192987
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
Imperousне получилось с помощью ::befor и ::after повернуть нормально див
Не совсем понятно как ты собираешься поворачивать сам див с помощью его псевдоклассов?
...
Рейтинг: 0 / 0
16.03.2016, 10:26
| Ответить | Цитировать | Написать  
Помогите решить задачу одним дивом
    #39193031
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
ImperousТут пример того что я хочу, но с кучей дивов.
Тут используется вращение двух дивов в разные стороны.
Псевдоэлементы с родителем не будут вращаться в разные стороны.
...
Рейтинг: 0 / 0
16.03.2016, 10:57
| Ответить | Цитировать | Написать  
Помогите решить задачу одним дивом
    #39193072
Imperous
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Imperous
Участник
Все равно должен быть вариант попроще... Я в это верю )
...
Рейтинг: 0 / 0
16.03.2016, 11:20
| Ответить | Цитировать | Написать  
Помогите решить задачу одним дивом
    #39193116
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
ImperousЯ в это верю )
Вера оно конечно дело такое... Сугубо индивидуальное.
...
Рейтинг: 0 / 0
16.03.2016, 11:50
| Ответить | Цитировать | Написать  
Помогите решить задачу одним дивом
    #39193220
justajoke
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
justajoke
Гость
krvsaПсевдоэлементы с родителем не будут вращаться в разные стороны.
Можно вращать псевдоэлементы дополнительно, чтобы они докручивались дальше и выглядело бы это как вращение в разные стороны
...
Рейтинг: 0 / 0
16.03.2016, 13:22
| Ответить | Цитировать | Написать  
Помогите решить задачу одним дивом
    #39194021
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
justajokeМожно вращать псевдоэлементы дополнительно
Ты пробовал? Где твой тестовый пример?
...
Рейтинг: 0 / 0
17.03.2016, 08:32
| Ответить | Цитировать | Написать  
Помогите решить задачу одним дивом
    #39194027
Фотография krvsa
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
krvsa
Участник
justajokeМожно вращать псевдоэлементы дополнительно, чтобы они докручивались дальше и выглядело бы это как вращение в разные стороны
Попробовал... Действительно можно вращать.

Но псевдоэлемен перекрывает родителя.

Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=windows-1251' />
<!--
<script src='http://code.jquery.com/jquery-latest.js'></script>
<script src="https://code.angularjs.org/1.3.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.9/angular-route.js"></script>
-->
<style type='text/css'>
.test {
	position : relative;
	width : 100px;
	height: 100px;
	transform: rotate(-2.5deg);
	border: 4px solid;
	z-index: 2;
}
.test::after {
	content: " ";
	display: block;
	position : relative;
	width : 100px;
	height: 100px;
	transform: rotate(4.5deg);
	border: 4px solid red;
	z-index: 1;
}
</style>
<script type='text/javascript'>
</script>
</head>
<body>
<div class="test"></div>
</body>
</html>
...
Рейтинг: 0 / 0
17.03.2016, 08:46
| Ответить | Цитировать | Написать  
Помогите решить задачу одним дивом
    #39196565
justajoke
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
justajoke
Гость
krvsaНо псевдоэлемен перекрывает родителя.

<span>:after</span> и помещаем туда то, что должно быть сверху.
...
Рейтинг: 0 / 0
20.03.2016, 19:44
| Ответить | Цитировать | Написать  
Помогите решить задачу одним дивом
    #39196594
Imperous
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Imperous
Участник
justajokekrvsaНо псевдоэлемен перекрывает родителя.

<span>:after</span> и помещаем туда то, что должно быть сверху.
пример пожалуйста.
...
Рейтинг: 0 / 0
20.03.2016, 21:30
| Ответить | Цитировать | Написать  
10 сообщений из 10, страница 1 из 1
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Помогите решить задачу одним дивом
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]