С наступающим Новым годом! Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Black_Star
21 / 21 / 16
Регистрация: 06.05.2016
Сообщений: 249
1

Анимация, вращение элементов, согласование

22.12.2016, 10:59. Просмотров 234. Ответов 0
Метки нет (Все метки)

Добрый день уважаемые. Подскажите пожалуйста, как добиться для отражённых изображений синхронного отображения с первоначальными.

https://jsfiddle.net/BlackStar1991/3b1bv6ch/

CSS
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
 .blurMirror{
    margin-left: 3px;
    transform: rotate(180deg) skewX(-3deg);
    filter: blur(5px);
}
 
 
 
@keyframes rotateImg{
    0%, 10%{
        transform: rotateY(0deg);
        transform-origin: center center;
    }
    
    20%, 100%{
        transform: rotateY(900deg);
        transform-origin: center center;
 
    }
}
@keyframes rotateImgBl{
    0%, 10%{
        transform:  rotateY(180deg) skewX(-3deg);
        transform-origin: center center;
        filter: blur(5px);
    }
    
    20%, 100%{
        transform: rotateY(1080deg) skewX(-3deg);
        transform-origin: center center;
        filter: blur(5px);
 
    }
 
 
}
HTML5
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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<div class="textBlock">
        <h1>- Как прошёл день?</h1>
        <h1>- Безвозвратно.</h1>
    </div>
    <div class="picturesBlock">
        <div class="mainePicture ">
            <div class="imgBlock animat">
                 <div class="face side1">
                    <div class="pictureOne"></div>       </div>
                <div class="face side2">
                        <div class="pictureTwo"></div>
                </div>
            </div>
 
            <div class="imgBlock animat">
                 <div class="face side1">
                    <div class="pictureOne"></div>       </div>
                <div class="face side2">
                        <div class="pictureTwo"></div>
                </div>
            </div>
 
            <div class="imgBlock animat">
                 <div class="face side1">
                    <div class="pictureOne"></div>       </div>
                <div class="face side2">
                        <div class="pictureTwo"></div>
                </div>
            </div>
            <div class="imgBlock animat">
                 <div class="face side1">
                    <div class="pictureOne"></div>       </div>
                <div class="face side2">
                        <div class="pictureTwo"></div>
                </div>
            </div>
            <div class="imgBlock animat">
                 <div class="face side1">
                    <div class="pictureOne"></div>       </div>
                <div class="face side2">
                        <div class="pictureTwo"></div>
                </div>
            </div>
            <div class="imgBlock animat">
                 <div class="face side1">
                    <div class="pictureOne"></div>       </div>
                <div class="face side2">
                        <div class="pictureTwo"></div>
                </div>
            </div>
            <div class="imgBlock animat">
                 <div class="face side1">
                    <div class="pictureOne"></div>       </div>
                <div class="face side2">
                        <div class="pictureTwo"></div>
                </div>
            </div>
        </div>
        
 
 
 
            <div class="mainePicture ">
            <div class="imgBlock blurMirror animat2">
                 <div class="face side1">
                    <div class="pictureOne"></div>       </div>
                <div class="face side2">
                        <div class="pictureTwo"></div>
                </div>
            </div>
 
            <div class="imgBlock blurMirror animat2">
                 <div class="face side1">
                    <div class="pictureOne"></div>       </div>
                <div class="face side2">
                        <div class="pictureTwo"></div>
                </div>
            </div>
 
            <div class="imgBlock blurMirror animat2">
                 <div class="face side1">
                    <div class="pictureOne"></div>       </div>
                <div class="face side2">
                        <div class="pictureTwo"></div>
                </div>
            </div>
            <div class="imgBlock blurMirror animat2">
                 <div class="face side1">
                    <div class="pictureOne"></div>       </div>
                <div class="face side2">
                        <div class="pictureTwo"></div>
                </div>
            </div>
            <div class="imgBlock blurMirror animat2">
                 <div class="face side1">
                    <div class="pictureOne"></div>       </div>
                <div class="face side2">
                        <div class="pictureTwo"></div>
                </div>
            </div>
            <div class="imgBlock blurMirror animat2">
                 <div class="face side1">
                    <div class="pictureOne"></div>       </div>
                <div class="face side2">
                        <div class="pictureTwo"></div>
                </div>
            </div>
            <div class="imgBlock blurMirror animat2">
                 <div class="face side1">
                    <div class="pictureOne"></div>       </div>
                <div class="face side2">
                        <div class="pictureTwo"></div>
                </div>
            </div>
        </div>
   
 
 </div>
Я не могу понять какие параметры transform: rotate по осям X Y нужно задать @keyframes rotateImgBl что б оно отображалось верно. + какой угол надо задать что б разблуренные кадры тоже переходили на второй кадр после трансформации. Подскажите пожалуйста
0
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
22.12.2016, 10:59
Ответы с готовыми решениями:

Анимация: плавное исчезновение и быстрое появление элементов
Наткнулся я на сайт http://www.lua.ru и увидел там необычную, по крайней мере...

Анимация: вращение рисунка
uses graphabc; var i:integer; begin setwindowsize(800,600);...

Анимация: вращение рисунка
Помогите сделать вращение треугольника

Анимация, вращение двух отрезков и шарика
Добрый вечер, господа! очень нужна ваша помощь.. есть задача: в окне...

Анимация: Вращение картинки в Image или PictureBox
Можно ли средствами VB 6 вращать картинку в Image или PictureBox отностительно...

0
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
22.12.2016, 10:59

[Анимация] Вращение по часовой и против часовой стрелки
Есть спидометр, подаётся значение спидометру 180 км / ч, вычисление сделал,...

Реализовать вращение 3D объекта как вращение камеры
Существует некий объект в 3D пространстве (для примера используем куб). В...

Анимация GUI элементов
Здравствуйте, есть ли быстрые способы анимировать GUI элементы в Lazarus? ...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
1
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru