ホームページ >ウェブフロントエンド >htmlチュートリアル >HTMLとCSSの2D変換モジュール
HTMLとCSSの2D変換モジュール
- php中世界最好的语言オリジナル
- 2018-03-13 11:36:141812ブラウズ
今回は HTML と CSS の 2D 変換モジュールについて説明します。 HTML と CSS の 2D 変換モジュールの 注意事項 について、実際のケースを見てみましょう。
1. 2D 変換モジュール2D 変換モジュール/*deg は度を表す単位*/transform:rotate(45deg);/*
最初のパラメータ:水平方向
2 番目のパラメータ:垂直方向
*/transform:translate(100px, 0px);/*
第一パラメータ:水平方向
第二パラメータ:垂直方向
注:
値が 1 の場合、変更されていないことを意味します
値が より大きい場合1、値が 1 未満の場合、水平方向と垂直方向のスケーリングが同じ場合は、パラメータとして省略できます。 *transform:scale(0.5, 0.5);*/transform:scale (1.5);/*
注意事項:
1. 複数の変換が必要な場合は、スペースで区切ってください
2. 2D 変換モジュールは、次の座標系を変更します。要素なので、回転後の移動は水平移動ではありません
* /transform:rotate(45deg) Translation(100px, 0px);
デフォルトでは、すべての要素は独自のものに基づいています。中心点は回転の基準として使用されます。中心点属性を変形することでその基準点を変更できます
/* 第一个参数:水平方向 第二个参数:垂直方向 注意点 取值有三种形式 具体像素 百分比 特殊关键字 */ /*transform-origin: 200px 0px;*/ /*transform-origin: 50% 50%;*/ /*transform-origin: 0% 0%;*/ /*transform-origin: center center;*/ transform-origin: left top;
3. : 500px;) と回転軸 (transform:rotateY(45deg );)
1.perspective: 500px;
<html lang="en"> <head>
<meta charset="UTF-8">
<title>95-2D转换模块-旋转轴向</title>
<style>
*{ margin: 0; padding: 0; }
ul{ width: 800px; height: 500px; margin: 0 auto; }
ul li{ list-style: none; width: 200px; height: 200px; margin: 0 auto; margin-top: 50px; border: 1px solid #000;
/* 1.什么是透视 近大远小
2.注意点 一定要注意, 透视属性必须添加到需要呈现近大远小效果的元素的父元素上面 */
perspective: 500px; } ul li img{ width: 200px; height: 200px;
/*perspective: 500px;*/
} ul li:nth-child(1){
/*默认情况下所有元素都是围绕Z轴进行旋转*/
transform: rotateZ(45deg); } ul li:nth-child(2) img{ transform: rotateX(45deg); } ul li:nth-child(3) img{ /* 总结: 想围绕哪个轴旋转, 那么只需要在rotate后面加上哪个轴即可 */ transform: rotateY(45deg); } </style> </head> <body> <ul> <li></li> <li></li> <li></li> </ul> </body> </html>
IV. ポーカーの練習
<html lang="en">
<head>
<meta charset="UTF-8">
<title>96-2D转换模块-练习</title>
<style>
*{ margin: 0; padding: 0; }
p{ width: 310px; height: 438px; border: 1px solid #000;
background-color: skyblue; margin: 100px auto; perspective: 500px; }
p img{ transform-origin: center bottom; transition: transform 1s; }
p:hover img{ transform: rotateX(80deg); }
</style> </head> <body> <p>  </p>
</body>
</html>
5. 写真の壁
<html lang="en">
<head>
<meta charset="UTF-8">
<title>97-2D转换模块-相片墙</title>
<style>
*{ margin: 0; padding: 0; }
ul{ height: 400px; border: 1px solid #000;
background-color: skyblue; margin-top: 100px;
text-align: center; }
ul li{ list-style: none;
width: 150px; height: 200px;
background-color: red; display: inline-block;
//转换成行内块级元素,用于水平排版
margin-top: 100px; transition: all 1s;
position: relative; box-shadow: 0 0 10px; }
ul li:nth-child(1){ transform: rotate(30deg); }
ul li:nth-child(2){ transform: rotate(-40deg); }
ul li:nth-child(3){ transform: rotate(10deg); }
ul li:nth-child(4){ transform: rotate(45deg); }
ul li img{ width: 150px; height: 200px;
border: 5px solid #fff; box-sizing: border-box;
}
ul li:hover{ /*transform: rotate(0deg);*/
/*transform: none;*/ transform: scale(1.5);
//之前的旋转被层叠掉, 只执行放大
z-index: 998;
//显示在最上面
}
</style>
</head>
<body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
この記事の事例を読んだ後、あなたは方法をマスターしたと思います。さらにエキサイティングなコンテンツについては、PHP 中国語 Web サイトの他の関連記事にご注目ください。 推奨書籍:
Web ページのレイアウト - クリア フローティング
以上がHTMLとCSSの2D変換モジュールの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。