HTMLの書き方
head終了タグ直前に自作のCSSを読み込みます。
<link rel="stylesheet" type="text/css" href="css/7-18.css">body内の画像リンクを表示させたい場所に以下のHTMLを記載します。
<div class="flipZ1">
<a href="#"><img src="img/04.jpg" alt=""><span class="cap">回転Z軸1＋テキストが出現 flipZ1</span></a>
</div>
CSSの書き方
/* 回転Z軸1----------------------------- */
.flipZ1 a{/*テキストの基点となる位置を定義*/
position: relative;
display: block;
}
.flipZ1 img {
transition: all 0.35s ease;/*移り変わる速さを変更したい場合はこの数値を変更*/
backface-visibility: hidden;/*三次元になった際に裏面を可視化させない*/
}
.flipZ1 a:hover img {/*hoverした時の変化*/
transform: rotate3d(-1, 1, 0, 100deg);/*奥行きをもたせて回転*/
opacity: 0;
}
.flipZ1 span.cap {
/*ここからエリアの絶対配置の指定*/
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
/*ここまでエリアの絶対配置の指定*/
transition: all 0.35s ease;/*移り変わる速さを変更したい場合はこの数値を変更*/
transform: rotate3d(1, -1, 0, 100deg);/*奥行きをもたせて回転*/
opacity: 0;
background:#333;/*背景色*/
color: #fff;/*テキストの色を変えたい場合はここを修正*/
/*ここからテキスト中央寄せの指定*/
display: flex;
justify-content: center;
align-items: center;
/*ここまでテキスト中央寄せの指定*/
}
.flipZ1 a:hover span.cap {/*hoverした時の変化*/
transform: rotate3d(0, 0, 0, 0deg);/*奥行きをもたせて回転*/
opacity: 1;
transition-delay: 0.15s;/*移り変わる速さを変更したい場合はこの数値を変更*/
}
HTMLの書き方
head終了タグ直前に自作のCSSを読み込みます。
<link rel="stylesheet" type="text/css" href="css/7-17.css">body内の画像リンクを表示させたい場所に以下のHTMLを記載します。
<div class="flipY">
<a href="#"><img src="img/03.jpg" alt=""><span class="cap">回転Y軸＋テキストが出現 flipY</span></a>
</div>
CSSの書き方
/* 回転Y軸----------------------------- */
.flipY a{/*テキストの基点となる位置を定義*/
position: relative;
display: block;
}
.flipY img {
transition: all 0.35s ease;/*移り変わる速さを変更したい場合はこの数値を変更*/
backface-visibility: hidden;/*三次元になった際に裏面を可視化させない*/
}
.flipY a:hover img {/*hoverした時の変化*/
transform: rotateY(-180deg);
opacity: 0;
}
.flipY span.cap {
/*ここからエリアの絶対配置の指定*/
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
/*ここまでエリアの絶対配置の指定*/
transition: all 0.35s ease;/*移り変わる速さを変更したい場合はこの数値を変更*/
transform: rotateY(90deg);/*横軸に回転*/
transform-origin: 50% 0%;/*回転する基点*/
opacity: 0;
background:#333;/*背景色*/
color: #fff;/*テキストの色を変えたい場合はここを修正*/
/*ここからテキスト中央寄せの指定*/
display: flex;
justify-content: center;
align-items: center;
/*ここまでテキスト中央寄せの指定*/
}
.flipY a:hover span.cap {/*hoverした時の変化*/
transform: rotateY(0);/*横軸に回転*/
opacity: 1;
transition-delay: 0.15s;/*移り変わる速さを変更したい場合はこの数値を変更*/
}
HTMLの書き方
head終了タグ直前に自作のCSSを読み込みます。
<link rel="stylesheet" type="text/css" href="css/7-16.css">body内の画像リンクを表示させたい場所に以下のHTMLを記載します。
<div class="flipX">
<a href="#"><img src="img/02.jpg" alt=""><span class="cap">回転X軸＋テキストが出現 flipX</span></a>
</div>
CSSの書き方
/* 回転X軸----------------------------- */
.flipX a{/*テキストの基点となる位置を定義*/
position: relative;
display: block;
}
.flipX img {
transition: all 0.35s ease;/*移り変わる速さを変更したい場合はこの数値を変更*/
backface-visibility: hidden;/*三次元になった際に裏面を可視化させない*/
}
.flipX a:hover img {/*hoverした時の変化*/
transform: rotateX(-180deg);/*縦軸に回転*/
opacity: 0;
}
.flipX span.cap {
/*ここからエリアの絶対配置の指定*/
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
/*ここまでエリアの絶対配置の指定*/
transition: all 0.35s ease;/*移り変わる速さを変更したい場合はこの数値を変更*/
transform: rotateX(90deg);/*縦軸に回転*/
transform-origin: 0% 50%;/*回転する基点*/
opacity: 0;
background:#333;/*背景色*/
color: #fff;/*テキストの色を変えたい場合はここを修正*/
/*ここからテキスト中央寄せの指定*/
display: flex;
justify-content: center;
align-items: center;
/*ここまでテキスト中央寄せの指定*/
}
.flipX a:hover span.cap {/*hoverした時の変化*/
transform: rotateX(0);
opacity: 1;
transition-delay: 0.15s;/*移り変わる速さを変更したい場合はこの数値を変更*/
}
HTMLの書き方
head終了タグ直前に自作のCSSを読み込みます。
<link rel="stylesheet" type="text/css" href="css/7-15.css">body内の画像リンクを表示させたい場所に以下のHTMLを記載します。
<div class="bgCH">
<a href="#"><span class="mask"><img src="img/01.jpg" alt=""><span class="cap">背景が中央から縦に出現＋テキスト bgCH</span></span></a>
</div>
CSSの書き方
/* 背景が中央から縦に出現＋テキスト */
.bgCH{
position:relative;/*テキストの基点となる位置を定義*/
}
.bgCH span.mask{
position:relative;/*背景色の基点となる位置を定義*/
display: block;/*画像をくくるspanタグをブロック要素にする*/
line-height: 0;/*行の高さを0にする*/
overflow: hidden;/*高さからはみ出ているものを隠す*/
}
.bgCH span.mask::before {
content:"";
position: absolute;
z-index: 2;
left: 0;
top: 0;
transition: transform .3s cubic-bezier(0.8, 0, 0.2, 1) 0s;/*移り変わる速さを変更したい場合はこの数値を変更*/
transform: scale(1, 0);
transform-origin:center;
background:#333;/*背景色*/
width: 100%;
height: 100%;
}
.bgCH span.mask:hover::before{/*hoverした時の変化*/
transform:scale(1, 1)
}
.bgCH span.cap{
position: absolute;
opacity:0;
transition: .5s ease-in-out;/*移り変わる速さを変更したい場合はこの数値を変更*/
z-index:3;/*テキストを前面に出す*/
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
color: #fff;/*テキストの色を変えたい場合はここを修正*/
line-height: 1.5;/*行の高さを1.5にする*/
}
.bgCH a:hover span.cap{/*hoverした時の変化*/
opacity:1;
}
HTMLの書き方
head終了タグ直前に自作のCSSを読み込みます。
<link rel="stylesheet" type="text/css" href="css/7-14.css">body内の画像リンクを表示させたい場所に以下のHTMLを記載します。
<div class="bgCW"><a href="#"><span class="mask">
<img src="img/07.jpg" alt=""><span class="cap">背景が中央から横に出現＋テキスト bgCW</span></span></a></div>
CSSの書き方
/* 背景が中央から横に出現＋テキスト */
.bgCW{
position:relative;/*テキストの基点となる位置を定義*/
}
.bgCW span.mask{
position:relative;/*背景色の基点となる位置を定義*/
display: block;
line-height: 0;/*行の高さを0にする*/
overflow: hidden;/*拡大してはみ出る要素を隠す*/
}
.bgCW span.mask::before {
content:"";
position: absolute;
z-index: 2;
background:#333;/*背景色*/
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: transform .3s cubic-bezier(0.8, 0, 0.2, 1) 0s;/*移り変わる速さを変更したい場合はこの数値を変更*/
transform: scale(0, 1);
transform-origin: center;
}
.bgCW span.mask:hover::before{/*hoverした時の変化*/
transform:scale(1, 1);
}
.bgCW span.cap{
opacity:0;
transition: .5s ease-in-out;/*移り変わる速さを変更したい場合はこの数値を変更*/
position: absolute;
z-index:3;/*テキストを前面に出す*/
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
color: #fff;/*テキストの色を変えたい場合はここを修正*/
line-height: 1.5;/*行の高さを1.5にする*/
}
.bgCW a:hover span.cap{/*hoverした時の変化*/
opacity:1;
}