2D
変換
変換（変換）はcss3の新しい属性であり、要素の回転、変位、スケーリングの効果を実現できます。
二次元座標系
2D変換は、2次元平面上の要素の形状と位置を変更する手法です。
翻訳する
予防
- いわゆる変位は、x軸とy軸に沿って位置を移動することです。
- 他の要素の位置には影響しません
- インライン要素には無効
指示
- transform（x、y）
- translateX（n）：X軸の場合
- translateY（n）：Y軸の場合
- translate（50％、50％）ここでのパーセンテージは、それ自体の幅と高さに応じて移動することです。
ボックスに水平方向と垂直方向の中央揃えを実現させます
注：ボックスは、ブロックレベルの要素とインラインブロック要素である必要があります。タンスレートで実現できます。ポジショニングと平行移動を使用することをお勧めします。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
position: relative;
width: 600px;
height: 600px;
margin: 200px auto;
background-color: red;
}
p {
position: absolute;
left: 50%;
top: 50%;
width: 200px;
height: 200px;
background-color: blue;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div>
<p></p>
</div>
</body>
</html>
回転する
予防
- 回転の単位は度です
- 正の値は時計回りに回転し、負の値は反時計回りに回転します
- 回転の中心点は要素の中心点です
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
img {
display: block;
margin: 500px auto;
border-radius: 50%;
width: 500px;
/* 过渡的效果 */
transition: all 2s linear 0s;
}
img:hover {
/* 旋转180deg */
transform: rotate(180deg);
}
</style>
</head>
<body>
<img src="./img/boy.jpg" alt="">
</body>
</html>
トライアングルケース
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
position: relative;
width: 200px;
height: 35px;
border: 1px solid black;
}
/* 利用伪元素制作案例 */
.box::after {
position: absolute;
top: 9px;
left: 175px;
content: '';
transform: rotate(45deg);
width: 10px;
height: 10px;
border-top: 1px solid red;
border-right: 1px solid red;
transition: all 2s 0s linear;
}
/* 鼠标经过div时旋转 */
.box:hover::after {
transform: rotate(90deg);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
回転の中心点を変更します
transform-origin:x y
- スペースを使用してxyを区切る
- デフォルトの回転中心点（50％50％）
- ピクセルまたは位置名詞で表現できます
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 200px;
height: 200px;
border: 1px solid red;
background-color: red;
margin: 200px auto;
transition: all 6s linear 0s;
/* 旋转中心点 左上角 */
transform-origin: left top;
}
.box:hover {
transform: rotate(360deg);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
ローテーションケース
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
height: 400px;
width: 400px;
border: 1px solid red;
margin: 200px auto;
overflow: hidden;
}
.box::after {
display: block;
content: "";
width: 400px;
height: 400px;
background-color: red;
transform-origin: left top;
transform: rotate(90deg);
transition: all 1s linear 0s;
}
.box:hover::after {
transform: rotate(0deg);
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
ズーム
scale(x,y)
予防
- scale（1,1）：幅と高さの両方が1倍に拡大されます
- scale（2,3）広倍率2倍高倍率3倍
- scale（5）幅と高さの両方が5倍に拡大されます
利点：回転の中心を設定できます。これにより、ズーム時に自分の要素に影響を与えることはありません。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 200px;
height: 200px;
background-color: blue;
/* 使用过渡效果 */
transition: all 2s linear 0s;
/* 让盒子居中对齐 */
margin: 200px auto;
}
.box:hover {
/* 放大2.0倍 不会影响其它元素的位置 */
transform: scale(2);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
画像拡大ケース
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* img放大star */
* {
margin: 0;
padding: 0;
}
div {
float: left;
overflow: hidden;
width: 450px;
height: 288px;
margin: 50px;
}
img {
width: 450px;
height: 288px;
transition: all 2s linear 0s;
}
img:hover {
transform: scale(2);
}
/* img放大 end */
</style>
<body>
<div><img src="./img/boy.jpg" alt=""></div>
<div><img src="./img/boy.jpg" alt=""></div>
<div><img src="./img/boy.jpg" alt=""></div>
</body>
</html>
ページングズームケース
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 800px;
margin: 200px auto;
}
li {
float: left;
list-style: none;
width: 30px;
height: 30px;
border: 1px solid #cccccc;
border-radius: 50%;
text-align: center;
line-height: 30px;
margin: 50px 20px;
transition: all 3s linear 0s;
}
li:hover {
transform: scale(2);
}
</style>
</head>
<body>
<div class="box">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<div style="clear: both;"></div>
</ul>
</div>
</body>
</html>
2D総合ライティング
予防
- css2Dのプロパティは省略できます
- transform：translate（x、y）rolate（n）scale（n）属性間にスペースを入れて、この順序で書き込みます
- 変位が最初に配置されます。順序を変更しないように注意してください
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.box {
width: 200px;
height: 200px;
background-color: blue;
/* 设置过渡效果 */
transition: all 2s linear 0s;
}
.box:hover {
/* 记住顺序 先设置 位移 再设置旋转 最后设置缩放*/
transform: translate(200px, 200px) rotate(200deg) scale(2);
}
</style>
</head>
<body>
<div class="box"> </div>
</body>
</html>
アニメーション
トランジションと比較して、アニメーションはより多くの変更、より多くの制御、自動再生などを実現できます。
アニメーションを使用する手順
- 最初にアニメーションを定義します
- アニメーションを再利用（呼び出し）
- @keyframesを使用してアニメーションを定義します。0％が開始状態、100％が終了状態です。
- アニメーションを呼び出すために必要な2つのプロパティanimation-nameainimation-duration（アニメーションの期間）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
/* 定义动画 */
@keyframes move {
0% {
transform: translate(0px, 0px);
}
100% {
/* 警告 ：translate(x,y)要加逗号 */
transform: translate(1000px, 0px);
background-color: blue;
border-radius: 50%;
}
}
.box {
width: 200px;
height: 200px;
background-color: red;
/* 动画的名字 */
animation-name: move;
/* 动画的持续时间 */
animation-duration: 5s;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
アニメーションの基本的な実現
予防
- フォームtoは0％100％に等しい;
- 詳細はパーセンテージで達成できます
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
@keyframes move {
0% {
transform: translate(0, 0);
}
25% {
transform: translate(1600px, 0);
}
50% {
transform: translate(1600px, 800px);
}
75% {
transform: translate(0px, 800px);
}
100% {
transform: translate(0px, 0px);
}
}
.box {
width: 200px;
height: 200px;
border-radius: 50%;
background-color: blue;
animation-name: move;
animation-duration: 5s;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
アニメーションのプロパティ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
/* 定义动画 */
@keyframes move {
25% {
transform: translate(1350px, 0px);
}
50% {
transform: translate(1350px, 600px);
}
75% {
transform: translate(0px, 600px);
}
100% {
transform: translate(0px, 0px);
}
}
.pic-con {
width: 450px;
height: 288px;
overflow: hidden;
border-radius: 40px;
margin: 10px;
/* 使用动画 */
/* 动画名字 */
animation-name: move;
/* 动画的持续时间 */
animation-duration: 4s;
/* 动画的运动曲线 */
animation-timing-function: linear;
/* 动画的延迟 */
animation-delay: 0s;
/* 动画的播放次数 */
animation-iteration-count: infinite;
/* 是否反方向播放 */
animation-direction: alternate;
/* 动画结束后保持的状态 可省略*/
/* animation-fill-mode: forwards; */
}
/* 鼠标移动到此处 动画停止播放 */
img {
width: 450px;
height: 288px;
}
.pic-con:hover {
animation-play-state: paused;
}
</style>
</head>
<body>
<div class="pic-con">
<img src="./img/boy.jpg" alt="">
</div>
</body>
</html>
注：アニメーション終了後の状態は、アニメーションの再生回数や逆再生の有無と競合することが規定されています。
アニメーションの省略形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
@keyframes move {
0% {
transform: translate(0, 0);
}
25% {
transform: translate(1600px, 0);
}
50% {
transform: translate(1600px, 600px);
}
75% {
transform: translate(0px, 600px);
}
100% {
transform: translate(0px, 0px);
}
}
.box {
width: 200px;
overflow: hidden;
/* 动画的简写 */
animation: move 10s linear 0s infinite alternate;
}
img {
width: 200px;
}
.box:hover {
animation-play-state: paused;
}
</style>
</head>
<body>
<div class="box">
<img src="./img/boy.jpg" alt="">
</div>
</body>
</html>
ヒートマップ
アイデア：ポジショニングとアニメーションを使用して効果を作成します。広がる波線が中央にあることを確認する必要があり、背景色の代わりにボックスの影の色を使用します。
注：スケールはボックスの影を拡大し、視力に影響を与えるため、スケールを使用しないのはなぜですか？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background-color: #333333;
}
.map {
/* 使用定位 子绝父相 */
position: relative;
width: 747px;
height: 617px;
background: url(./img/map.png) no-repeat;
margin: 200px auto;
}
.city {
position: absolute;
top: 194px;
left: 500px;
width: 80px;
height: 80px;
}
div.city1 {
position: absolute;
top: 460px;
left: 606px;
}
div.city2 {
position: absolute;
top: 508px;
left: 500px;
}
.circle {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 8px;
height: 8px;
background-color: blue;
border-radius: 50%;
}
div[class^="wave"] {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 8px;
height: 8px;
box-shadow: 0px 0px 20px skyblue;
border-radius: 50%;
/* 使用动画 */
animation: move 2s linear 0s infinite;
}
.city .wave2 {
/* 使用动画 */
animation: move 2s linear 10s infinite;
}
.city .wave3 {
/* 使用动画 */
animation: move 2s linear 20s infinite;
}
/* 定义动画 */
@keyframes move {
50% {
width: 40px;
height: 40px;
opacity: 1;
}
100% {
width: 80px;
height: 80px;
opacity: 0;
}
}
</style>
</head>
<body>
<div class="map">
<div class="city">
<div class="circle"></div>
<div class="wave1"></div>
<div class="wave2"></div>
<div class="wave3"></div>
</div>
<div class="city city1">
<div class="circle"></div>
<div class="wave1"></div>
<div class="wave2"></div>
<div class="wave3"></div>
</div>
<div class="city city2">
<div class="circle"></div>
<div class="wave1"></div>
<div class="wave2"></div>
<div class="wave3"></div>
</div>
</div>
</body>
</html>
アニメーション速度曲線の詳細な説明
タイプライター効果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 思路：利用步长可实现打字机效果 */
* {
margin: 0;
padding: 0;
}
.box {
width: 0px;
height: 30px;
/* 让文本强制一行显示 */
white-space: nowrap;
/* 剪裁 */
overflow: hidden;
font-size: 20px;
background-color: pink;
animation: move 2s steps(10) 0s infinite;
}
/* 定义动画 */
@keyframes move {
0% {
width: 0px;
}
100% {
width: 280px;
}
}
</style>
</head>
<body>
<div class="box">大家好,我的名字叫做尧子陌</div>
</body>
</html>
ランニングベア
注：背景画像とクマの走りは背景画像を使用しています
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background: url(./img/boy.jpg) no-repeat fixed top center;
background-size: cover;
}
.box {
position: fixed;
width: 200px;
height: 100px;
top: 50%;
transform: translate(-0px, -50%);
background: url(./img/bear.png) no-repeat;
animation: bear 0.4s steps(8) 0s infinite, move 3s forwards;
}
@keyframes bear {
0% {
background-position: 0 0;
}
100% {
background-position: -1600px 0px;
}
}
@keyframes move {
0% {
left: 0;
}
100% {
left: 50%;
}
}
</style>
</head>
<body>
<div class="box">
</div>
</body>
</html>
