Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Помогите решить задачу одним дивом / 10 сообщений из 10, страница 1 из 1
15.03.2016, 18:52
    #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
| Ответить | Цитировать | Написать  
16.03.2016, 10:26
    #39192987
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Помогите решить задачу одним дивом
Imperousне получилось с помощью ::befor и ::after повернуть нормально див
Не совсем понятно как ты собираешься поворачивать сам див с помощью его псевдоклассов?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
16.03.2016, 10:57
    #39193031
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Помогите решить задачу одним дивом
ImperousТут пример того что я хочу, но с кучей дивов.
Тут используется вращение двух дивов в разные стороны.
Псевдоэлементы с родителем не будут вращаться в разные стороны.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
16.03.2016, 11:20
    #39193072
Imperous
Imperous
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Помогите решить задачу одним дивом
Все равно должен быть вариант попроще... Я в это верю )
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
16.03.2016, 11:50
    #39193116
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Помогите решить задачу одним дивом
ImperousЯ в это верю )
Вера оно конечно дело такое... Сугубо индивидуальное.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
16.03.2016, 13:22
    #39193220
justajoke
justajoke
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Помогите решить задачу одним дивом
krvsaПсевдоэлементы с родителем не будут вращаться в разные стороны.
Можно вращать псевдоэлементы дополнительно, чтобы они докручивались дальше и выглядело бы это как вращение в разные стороны
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
17.03.2016, 08:32
    #39194021
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Помогите решить задачу одним дивом
justajokeМожно вращать псевдоэлементы дополнительно
Ты пробовал? Где твой тестовый пример?
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
17.03.2016, 08:46
    #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
| Ответить | Цитировать | Написать  
20.03.2016, 19:44
    #39196565
justajoke
justajoke
Гость
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
Помогите решить задачу одним дивом
krvsaНо псевдоэлемен перекрывает родителя.

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

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


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