• TOP
  • WordPress
    • まとめ
    • JavaScript
    • 記事
    • 画像/動画
    • 管理
    • アクセス/SEO対策
    • カテゴリ
    • サイドバー/ヘッダー
    • アイキャッチ
    • パスワード
    • コメント
  • プラグイン
  • CSS
  • ユーザー限定
Plus WordPress ワードプレスの基本・応用テクニックを紹介
ホーム › CSS › CSS3　拡大、縮小、スライド、回転

CSS3　拡大、縮小、スライド、回転

拡大、縮小、スライド、回転

ベース

1
2
3
4
5
6
7
    .demo {
    border: 3px solid #fff;
    width: 200px;
    height: 100px;
    overflow: hidden;
    box-shadow: 3px 3px 3px #666;
    }

拡大

effect1

1
  <div class="effect1 demo"><img src="keshiki1.jpg" alt="effect1" /></div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/*.effect1*/
 
.effect1 img {
width: 200px;
height: 100px;
transition: all 1s ease;
}
.effect1 img:hover {
width: 600px;
height: 360px;
margin-top: -200px;
margin-left: -200px;
overflow: hidden;
}

縮小

effect2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/*.effect2*/
 
.effect2 img {
width: 640px;
height: 360px;
transition: all 1s ease;
overflow: hidden;
margin-top: -200px;
margin-left: -300px;
}
.effect2 img:hover {
width: 200px;
height: 100px;
margin-top: 0px;
margin-left: 0px;
}

横スライド

effect3

1
2
3
4
5
6
7
8
.effect3 img {
transition: margin 1s ease;
overflow: hidden;
margin-top: -100px;
}
.effect3 img:hover {
margin-left: -300px;
}

縦スライド

effect4

1
2
3
4
5
6
7
8
9
10
11
/*.effect4*/
 
.effect4 img {
transition: margin 1s ease;
overflow: hidden;
margin-left: -300px;
margin-top: -200px;
}
.effect4 img:hover {
margin-top: 0px;
}

回転

effect5

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/*.effect5*/
 
.effect5 img {
width: 200px;
height: 100px;
}
.effect5 {
transition: all 0.5s ease;
}
.effect5:hover {
-webkit-transform: rotate(-10deg);
-moz-transform: rotate(-10deg);
-o-transform: rotate(-10deg);
-ms-transform: rotate(-10deg);
transform: rotate(-10deg);
}

拡大（枠）

effect6

1
2
3
4
5
6
7
8
9
/*.effect6*/
 
.effect6 {
transition: all 1s ease;
}
.effect6:hover {
width: 300px;
height: 200px;
}

枠変形

ベース

1
2
3
4
5
6
.demo2 {
width: 300px;
height: 300px;
overflow: hidden;
box-shadow: 2px 2px 2px #666;
}

枠変形

effect7

1
<div class="effect7 demo2"><img src="starbucks_logo_300.gif" alt="effect7" /></div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.effect7 img {
height: 300px;
width: 300px;
}
.effect7 img:hover {
margin-top: 0px;
overflow: hidden;
}
.effect7, .focus2 img {
transition: all 1s ease;
}
.effect7:hover {
width: 300px;
height: 300px;
border-radius: 50%;
}

枠変形（回転）

effect8

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/*.effect8*/
 
.effect8 img {
height: 300px;
width: 300px;
}
.effect8 {
transition: all 0.5s ease;
}
.effect8:hover {
width: 300px;
height: 300px;
border-radius: 50%;
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}

応用編

ベース

1
2
3
4
5
6
7
8
9
10
<div class="effect9">
        <img src="starbucks_logo_300.gif" width="300" height="300" alt="" />
<div class="mask">
      <h2>Hover Effects</h2>
          <p>A wonderful serenity has taken possession of
            my entire soul, like these sweet mornings of spring which I enjoy with
          my whole heart.</p>
      <a href="https://tympanus.net/Tutorials/OriginalHoverEffects/" target="_blank" class="info">Read More</a>
    </div>
  </div>

スライド

Hover Effects

A wonderful serenity has taken possession of
my entire soul, like these sweet mornings of spring which I enjoy with
my whole heart.

Read More

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
119
120
121
/* effect9 */
 
.effect9 {
width: 300px;
height: 300px;
margin: 10px;
float: left;
border: 10px solid #fff;
overflow: hidden;
position: relative;
text-align: center;
background-image: url(sb.jpg);
-webkit-box-shadow: 1px 1px 2px #e6e6e6;
-moz-box-shadow: 1px 1px 2px #e6e6e6;
box-shadow: 1px 1px 2px #e6e6e6;
}
.effect9 .mask {
width: 300px;
height: 300px;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
background-color: rgba(146, 96, 91, 0.3);
-webkit-transform: translateX(-300px);
-moz-transform: translateX(-300px);
-o-transform: translateX(-300px);
-ms-transform: translateX(-300px);
transform: translateX(-300px);
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=80)";
filter: alpha(opacity=80);
opacity: 0.8;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.effect9 img {
display: block;
position: relative;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
-ms-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.effect9 p {
font-size: 12px;
position: relative;
color: #fff;
padding: 10px 20px 20px;
text-align: center;
font-family: Arial, Helvetica, sans-serif;
font-style: italic;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
transition: all 0.3s linear;
}
.effect9 a.info {
display: inline-block;
text-decoration: none;
padding: 7px 14px;
color: #CCC;
background: rgba(0, 0, 0, 0.7);
text-transform: uppercase;
-webkit-box-shadow: 0 0 1px #000;
-moz-box-shadow: 0 0 1px #000;
box-shadow: 0 0 1px #000;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
transition: all 0.5s linear;
}
.effect9 a.info:hover {
color: #F90;
background: rgba(0, 0, 0, 0.9);
}
.effect9 h2 {
color: #333;
background: rgba(255, 255, 255, 0.8);
-webkit-box-shadow: 0px 1px 3px rgba(159, 141, 140, 0.5);
-moz-box-shadow: 0px 1px 3px rgba(159, 141, 140, 0.5);
box-shadow: 0px 1px 3px rgba(159, 141, 140, 0.5);
}
.effect9:hover .mask {
-webkit-transform: translateX(0px);
-moz-transform: translateX(0px);
-o-transform: translateX(0px);
-ms-transform: translateX(0px);
transform: translateX(0px);
}
.effect9:hover img {
-webkit-transform: translateX(300px);
-moz-transform: translateX(300px);
-o-transform: translateX(300px);
-ms-transform: translateX(300px);
transform: translateX(300px);
}
.effect9:hover p {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}

拡大

Hover Effects

A wonderful serenity has taken possession of
my entire soul, like these sweet mornings of spring which I enjoy with

Read More

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
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
/* effect10 */
 
.effect10 {
width: 300px;
height: 300px;
margin: 10px;
float: left;
border: 10px solid #fff;
overflow: hidden;
position: relative;
text-align: center;
background-image: url(sb.jpg);
-webkit-box-shadow: 1px 1px 2px #e6e6e6;
-moz-box-shadow: 1px 1px 2px #e6e6e6;
box-shadow: 1px 1px 2px #e6e6e6;
}
.effect10 .mask {
width: 300px;
height: 300px;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
background-color: rgba(255, 231, 179, 0.3);
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
transition: all 0.5s linear;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
}
.effect10 img {
display: block;
position: relative;
-webkit-transform: scaleY(1);
-moz-transform: scaleY(1);
-o-transform: scaleY(1);
-ms-transform: scaleY(1);
transform: scaleY(1);
-webkit-transition: all 0.7s ease-in-out;
-moz-transition: all 0.7s ease-in-out;
-o-transition: all 0.7s ease-in-out;
-ms-transition: all 0.7s ease-in-out;
transition: all 0.7s ease-in-out;
}
.effect10 h2 {
text-transform: uppercase;
text-align: center;
position: relative;
font-size: 17px;
padding: 10px;
margin-top: 20px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
color: #333;
background: transparent;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
transition: all 0.5s linear;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
}
.effect10 p {
font-family: Georgia, serif;
font-style: italic;
font-size: 12px;
position: relative;
padding: 10px 20px 20px;
text-align: center;
color: #333;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
transition: all 0.5s linear;
}
.effect10 a.info {
display: inline-block;
text-decoration: none;
padding: 7px 14px;
-webkit-box-shadow: 0 0 2px #666;
-moz-box-shadow: 0 0 2px #666;
box-shadow: 0 0 2px #666;
color: #CCC;
background: rgba(0, 0, 0, 0.7);
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
transition: all 0.5s linear;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
}
.effect10 a.info:hover {
color: #C96;
background: rgba(0, 0, 0, 0.8);
}
.effect10:hover img {
-webkit-transform: scale(10);
-moz-transform: scale(10);
-o-transform: scale(10);
-ms-transform: scale(10);
transform: scale(10);
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
}
.effect10:hover .mask {
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}
.effect10:hover h2, .effect10:hover p, .effect10:hover a.info {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
}

タグ: CSS3
カテゴリー: CSS

コメントを残す コメントをキャンセル

関連記事
CSS3　ボックスシャドウ
CSS3 アコーディオンメニュー
CSS3　グラデーション
CSS3　角を丸くする
CSS3　テキストにシャドウ（影）
CSS3のみで画面外からメニューをスライド表示
人気記事
高機能でオシャレな実用的メニュー（HTMLテンプレート）
Webページ全体をフェードイン、フェードアウト
指定したカテゴリIDのカテゴリ名のみ取得
コメントに画像を挿入できるようにする
記事の続きを読むを消す
投稿、固定ページ内にウィジェットを挿入
最新記事を自動でスライドショー
phpMyAdminのユーザー名とパスワードの確認方法
記事ごとに個別のCSSやJavaScriptを追加
特定のカテゴリに個別のCSSを適応させる
フリーの高機能HTMLテンプレート
画像や動画をポップアップし再生
Contact Form7の送信完了画面をカスタマイズ
カテゴリー別に違うサイドバーを出す
カテゴリ別に違うカテゴリ（テンプレート）を表示
CSSやJavaScriptのハンドル名(id)を確認
タイトルや本文からタグを自動生成
非表示、置換テクニック
ページごとに違うヘッダーを読み込む
管理画面の投稿一覧で投稿IDを表示する
アイキャッチ(サムネイル)を呼び出す
管理画面の投稿一覧へアイキャッチを表示
CSS3のみで画面外からメニューをスライド表示
背景をスライドショーにする
CSS3　角を丸くする
Contact Form7に画像認証機能を追加
スライドショー　Meteor Slides
カテゴリに別々のアイコンを表示
購読者にパスワードを変更させない
記事をランダムに表示させる
コメントのメールアドレス入力覧を消す
レスポンシブなLightbox jQuery プラグイン Strip
パスワードを間違えると一定時間ログインできないようにする
スライドショー　Skitter Slideshow
個別にJavaScriptを振り分ける
リンクの表示順を並べ替える
ショートコードを追加するプラグイン
全記事のアイキャッチをまとめて自動作成
JavaScriptで画面外からメニューをスライド表示
指定した日付や時間を基準に振り分け
    メルマガ購読
  • メールマガジンではWordPressのおもしろい使い方を紹介しています。またユーザー限定ページとも連動しているので、そちらも自由に観覧できるようになります。
  • 登録フォーム
PlusWordPress
  • お問い合わせ
  • このサイトについて
Link
  • 人気ブログランキング
  • 使えるWordPressテーマ
背景変更
  • デフォルト
  • ホワイト
  • ブラック
  • グレー
  • Facebook
  • RSS Feed
  • Google Plus
© 2024 Plus WordPress