章节 (20) 2D转换模块

作者: 壹点微尘 | 来源:发表于2017-05-26 21:44 被阅读11次

一. 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转换模块

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

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

/*
第一个参数:水平方向
第二个参数:垂直方向
注意点
取值有三种形式
具体像素
百分比
特殊关键字
*/
/*transform-origin: 200px 0px;*/
/*transform-origin: 50% 50%;*/
/*transform-origin: 0% 0%;*/
/*transform-origin: center center;*/
transform-origin: left top;

形变中心点

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

1.perspective: 500px;

1.1什么是透视

近大远小

1.2.注意点

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

2.transform: rotateY(45deg);

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

代码示例:

<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>

透视属性和旋转轴向

四. 扑克牌练习

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>96-2D转换模块-练习</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            width: 310px;
            height: 438px;
            border: 1px solid #000;
            background-color: skyblue;
            margin: 100px auto;
            perspective: 500px;
        }
        div img{
            transform-origin: center bottom;
            transition: transform 1s;
        }
        div:hover img{
            transform: rotateX(80deg);
        }
    </style>
</head>
<body>
<div>
    ![](images/pk.png)
</div>
</body>
</html>

扑克牌

五. 照片墙

<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>

照片墙

六. 盒子阴影和文字阴影

1.如何给盒子添加阴影

box-shadow: 水平偏移垂直偏移模糊度阴影扩展阴影颜色内外阴影;

2.注意点

2.1盒子的阴影分为内外阴影, 默认情况下就是外阴影
2.2快速添加阴影只需要编写三个参数即可
box-shadow: 水平偏移垂直偏移模糊度;
默认情况下阴影的颜色和盒子内容的颜色一致

.box1{
            width: 200px;
            height: 200px;
            background-color: red;
            margin: 100px auto;
            text-align: center;
            line-height: 200px;
            /*box-shadow: 10px 10px 10px 10px skyblue;*/
            /*box-shadow: 10px 10px 10px 10px skyblue inset;*/
            box-shadow: 10px 10px 10px;
            color: yellow;
      }

盒子阴影

3.如何给文字添加阴影

text-shadow: 水平偏移垂直偏移模糊度阴影颜色 ;

.box2{
            width: 200px;
            height: 200px;
            margin: 0 auto;
            background-color: pink;
            text-align: center;
            line-height: 200px;
            font-size: 40px;
            /*text-shadow: 10px 10px 10px black;*/
            text-shadow: 10px 10px 10px;
            color: purple;
     }

文字阴影

七. 翻转菜单

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>99-翻转菜单-综合练习</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .nav{
            width: 400px;
            height: 40px;
            margin: 0 auto;
            margin-top: 100px;
            background-color: black;
        }
        .nav>li{
            list-style: none;
            float: left;
            width: 120px;
            height: 40px;
            background-color: green;
            margin-left: 10px;
            text-align: center;
            line-height: 40px;
            position: relative;
        }
        .sub{
            /*不显示元素*/
            /*display: none;*/ //隐藏掉
            width: 120px;
            position: absolute;  //由于下面div中的文字会挡住菜单中的文字,故通过子绝父相来提高他的优先级
            left: 0;  //设置定位属性 一定要设置left 和top等属性
            top: 40px;
        }
        .sub li{
            list-style: none;
            background-color: deeppink;
            transform: rotateY(180deg);
            transition: all 1s;  //添加过渡
            /*设置透明度*/
            opacity: 0;
        }
        /*
        .nav>li:hover .sub{
            display: block;   //如果前面通过display: none;隐藏的话,这个地方通过设置 display: block; 显示出来;  不过例子中通过改变li的透明度实现的隐藏
        }
        */
        .nav>li:hover .sub li{
            transform: none; //取消形变
            opacity: 1;
        }

        //hover 时通过延时依次显示
        .nav>li:hover .sub li:nth-child(1){
            transition-delay: 0ms;
        }
        .nav>li:hover .sub li:nth-child(2){
            transition-delay: 200ms;
        }
        .nav>li:hover .sub li:nth-child(3){
            transition-delay: 400ms;
        }
        .nav>li:hover .sub li:nth-child(4){
            transition-delay: 600ms;
        }
        .nav>li:hover .sub li:nth-child(5){
            transition-delay: 800ms;
        }

         //默认状态反过来
        .nav>li .sub li:nth-child(5){
            transition-delay: 0ms;
        }
        .nav>li .sub li:nth-child(4){
            transition-delay: 200ms;
        }
        .nav>li .sub li:nth-child(3){
            transition-delay: 400ms;
        }
        .nav>li .sub li:nth-child(2){
            transition-delay: 600ms;
        }
        .nav>li .sub li:nth-child(1){
            transition-delay: 800ms;
        }
        div{
            width: 400px;
            height: 300px;
            background-color: red;
            margin: 0 auto;
        }
    </style>
</head>
<body>
<ul class="nav">
    <li>一级菜单
        <ul class="sub">
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
        </ul>
    </li>
    <li>一级菜单
        <ul class="sub">
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
        </ul>
    </li>
    <li>一级菜单
        <ul class="sub">
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
            <li>二级菜单</li>
        </ul>
    </li>
</ul>
<div>
我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字
我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文
字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是
文字我是文字我是文字我是文字
</div>
</body>
</html>

翻转菜单

章节 (20) 2D转换模块

一. 2D转换模块

2D转换模块

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

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

1.perspective: 500px;

1.1什么是透视

1.2.注意点

2.transform: rotateY(45deg);

四. 扑克牌练习

五. 照片墙

六. 盒子阴影和文字阴影

1.如何给盒子添加阴影

2.注意点

3.如何给文字添加阴影

七. 翻转菜单

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

章节 (20) 2D转换模块

一. 2D转换模块

2D转换模块

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

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

1.perspective: 500px;

1.1什么是透视

1.2.注意点

2.transform: rotateY(45deg);

四. 扑克牌练习

五. 照片墙

六. 盒子阴影和文字阴影

1.如何给盒子添加阴影

2.注意点

3.如何给文字添加阴影

七. 翻转菜单

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

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