HTML与CSS中2D转换模块


本文摘自PHP中文网,作者php中世界最好的语言,侵删。

这次给大家带来HTML与CSS中2D转换模块HTML与CSS中2D转换模块的注意事项有哪些,下面就是实战案例,一起来看一下。

一. 2D转换模块

2D转换模块

/*其中deg是单位, 代表多少度*/
transform: rotate(45deg);/*
第一个参数:水平方向
第二个参数:垂直方向
*/transform: translate(100px, 0px);/*
第一个参数:水平方向
第二个参数:垂直方向
注意点:
如果取值是1, 代表不变
如果取值大于1, 代表需要放大
如果取值小于1, 代表需要缩小
如果水平和垂直缩放都一样, 那么可以简写为一个参数
*//*transform: scale(0.5, 0.5);*/transform: scale(1.5);/*
注意点:
1.如果需要进行多个转换, 那么用空格隔开
2.2D的转换模块会修改元素的坐标系, 所以旋转之后再平移就不是水平平移的
*/transform: rotate(45deg) translate(100px, 0px);


2D转换模块

1.png

二. 2D转换模块-形变中心点

默认情况下所有的元素都是以自己的中心点作为参考来旋转的, 我们可以通过形变中心点属性来修改它的参考点

1

2

3

4

5

6

7

8

9

10

11

12

13

14

/*

第一个参数:水平方向

第二个参数:垂直方向

注意点

取值有三种形式

具体像素

百分比

特殊关键字

*/

/*transform-origin: 200px 0px;*/

/*transform-origin: 50% 50%;*/

/*transform-origin: 0% 0%;*/

/*transform-origin: center center;*/

transform-origin: left top;


2.png

三.透视属性(perspective: 500px;) 和 旋转轴向 (transform: rotateY(45deg);)

1.perspective: 500px;

1.1什么是透视

近大远小

1.2.注意点

一定要注意, 透视属性必须添加到需要呈现近大远小效果的元素的父元素上面

2.transform: rotateY(45deg);

想围绕哪个轴旋转, 那么只需要在rotate后面加上哪个轴即可;

代码示例:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

<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>![](images/rotateZ.jpg)</li>     <li>![](images/rotateX.jpg)</li>     <li>![](images/rotateY.jpg)</li> </ul> </body> </html>


3.png

四. 扑克牌练习

1

2

3

4

5

6

7

8

9

10

11

12

13

<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>     ![](images/pk.png) </p>

    </body>

</html>



4.gif

五. 照片墙

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

<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>![](images/1.jpg)</li>    

                <li>![](images/2.jpg)</li>    

                <li>![](images/3.jpg)</li>    

                <li>![](images/4.jpg)</li>

              </ul>

     </body>

</html>

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

网页的布局方式之清除浮动

网页的布局方式与浮动

HTML与CSS的盒子模型

CSS的背景与精灵图

以上就是HTML与CSS中2D转换模块的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

如何实现css代码复用

css怎么实现图片半透明效果

css中的角度单位有哪些?

你不知道的css使用技巧

谈谈css中的混合模式

css如何设置黑体样式

css中什么叫浮动

css定位有哪些

HtmlHtml5有什么区别

Html中怎样可以用超链接打开新窗口并且控制窗口属性

更多相关阅读请进入《Html》频道 >>




JavaScript 从入门到项目实践
书籍

JavaScript 从入门到项目实践

清华大学出版社

本书采取“基础知识→核心应用→核心技术→高级应用→行业应用→项目实践”的结构和“由浅入深,由深到精”的学习模式进行讲解。全书共35章,不仅介绍了HTML、CSS、对象、函数、事件等JavaScript语言的基础知识,而且深入介绍了jQuery、客户端、服务器端、数据存储等核心技术。



打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...