ホームページ > 記事 > ウェブフロントエンド > css3モバイルプロパティ

css3モバイルプロパティ

php中世界最好的语言オリジナル: 2018-03-21 17:12:161575ブラウズ

今回はCSS3のmobile属性についてご紹介します。CSS3のmobile属性を使用する際の注意点について、実際のケースを見てみましょう。

transform function

scaling

sacle メソッドを使用して、パラメータにスケーリング係数を指定します。たとえば、sacle(0.5) は 50% 縮小することを意味します。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>scale方法使用示例</title>
    <style>
        p {
            width: 300px;
            margin: 150px auto;
            background-color: yellow;
            text-align: center;
            -webkit-transform: scale(0.5);
            -moz-transform: scale(0.5);
            -o-transform: scale(0.5);
        }
    </style>
</head>
<body>
<p>示例文字</p>
</body>
</html>

さらに、要素の水平方向の倍率と垂直方向の倍率をそれぞれ指定できます。例は次のとおりです:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>scale方法使用示例</title>
    <style>
        p {
            width: 300px;
            margin: 150px auto;
            background-color: yellow;
            text-align: center;
            -webkit-transform: scale(0.5,2);
            -moz-transform: scale(0.5,2);
            -o-transform: scale(0.5,2);
        }
    </style>
</head>
<body>
<p>示例文字</p>
</body>
</html>

tilt

文字や画像の傾き処理を実装し、パラメータで傾き角度と垂直方向の傾き角度を指定します。例えば、「skew(30deg,30deg)」は水平方向に30度傾くことを意味します。例は次のとおりです。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>skew方法使用示例</title>
    <style>
        p {
            width: 300px;
            margin: 150px auto;
            background-color: yellow;
            text-align: center;
            -webkit-transform: skew(30deg, 30deg);
            -moz-transform: skew(30deg,30deg);
            -o-transform: skew(30deg,30deg);
        }
    </style>
</head>
<body>
<p>示例文字</p>
</body>
</html>

Rotate

要素を回転するには、パラメータ「角度」が 1 つあります。単位 deg は度を意味します。正の数は時計回りの回転を意味し、負の数は反時計回りの回転を意味します。例は以下のとおりです。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>对元素使用多重变形的示例</title>
    <style>
        p {
            margin: 100px;
            width: 300px;
            background-color: yellow;
            text-align: center;
            -webkit-transform:rotate(30deg);
            -moz-transform:rotate(30deg);
            -o-transform:rotate(30deg);
        }
    </style>
</head>
<body>
<p>示例文字</p>
</body>
</html>

Move

テキストや画像を移動するにはtranslateメソッドを使用し、パラメータで水平方向の移動距離と垂直方向の移動距離を指定します。例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>translate方法使用示例</title>
    <style>
        p {
            width: 300px;
            margin: 150px auto;
            background-color: yellow;
            text-align: center;
            -webkit-transform: translate(50px,50px);
            -moz-transform: translate(50px,50px);
            -o-transform: translate(50px,50px);
        }
    </style>
</head>
<body>
<p>示例文字</p>
</body>
</html>

変換例

例 1:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>对元素使用多重变形的示例</title>
    <style>
        p {
            width: 300px;
            background-color: yellow;
            text-align: center;
            -webkit-transform: translate(150px,200px) rotate(45deg) scale(1.5);
            -moz-transform: translate(50px,50px) rotate(45deg) scale(1.5);
            -o-transform: translate(50px,50px) rotate(45deg) scale(1.5);
        }
    </style>
</head>
<body>
<p>示例文字</p>
</body>
</html>

この例は、最初に移動し、次に回転し、最後に拡大縮小します

効果:

例 2:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>对元素使用多重变形的示例</title>
    <style>
        p {
            width: 300px;
            background-color: yellow;
            text-align: center;
            -webkit-transform:rotate(45deg) scale(1.5) translate(150px,200px);
            -moz-transform:rotate(45deg) scale(1.5) translate(150px,200px);
            -o-transform: rotate(45deg) scale(1.5) translate(150px,200px);
        }
    </style>
</head>
<body>
<p>示例文字</p>
</body>
</html>

最初に回転します、拡大縮小後、最後に

を移動します。効果: