Css日记4

最新推荐文章于 2023-03-25 21:27:38 发布

M团子

最新推荐文章于 2023-03-25 21:27:38 发布

阅读量100

点赞数

本文链接：https://blog.csdn.net/qq_47872824/article/details/109152592

版权

一：3D案例：
在这里插入图片描述
实现一个鼠标通过，立体感的上下翻转，此案例注意的十，上下盒子的位置，先设置下盒子向屏幕方向下爬，也就是x轴度数为正的旋转，再移动到前面盒子的底部，此时移动前面盒子的z轴向往，主要是未来控制立方体的体心在轴上位置。

<style>
        *{
            margin: 0;
            padding: 0;
        }
        li{
            list-style: none;
        }
        ul{
            margin: 100px;
        }
        ul li{
            width: 120px;
            height: 35px;
            /* 需要给box旋转也需要透视，所以给li加透视 */
            perspective: 500px;
        }
        .box{
            position: relative;
            width: 100%;
            height: 100%;
            transform-style: preserve-3d;
            transition: all 3s;
        }

        .box:hover{
            transform: rotateX(90deg);
        }
        .front,.bottom{
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
        }

        .front{
            background-color: pink;
            z-index: 1;
            transform: translateZ(17.5px);
        }
        .bottom{
            background-color: rebeccapurple;
            /* 记住先移动再旋转 */
            transform: translateY(17.5px) rotateX(-90deg);
        }
        
    </style>
</head>
<body>
    <ul>
        <li>
            <div class="box">
                <div class="front">
                </div>
                <div class="bottom">
                </div>
            </div>
        </li>
    </ul>

</body>
</html>

二：JS学习

1.数据类型的转换
（1）转换为字符串类型
（2）转换为数字型
（3）转换为布尔类型

（1）：①toSteing() :变量.toString

<script>
    var num=10;
    var str=num.toString();
    console.log(str);
</script>

②String(变量)

<script>
    var num=10;
    console.log(String(var));
</script>

③变量+’ '(隐式转换)

<script>
    var num=10;
    console.log(num+'');
</script>

tostring 与string区别：string()的方法能够让其null和undefined强制类型转换可以伸成字符串而不引发错误。

（2）转换为数字型
在这里插入图片描述
第一、二种：

 <script>
        var age=prompt('请输入你的年龄');
        //1.parsenint(变量) 可以把字符型转换为数字型 得到整型
        console.log(parseInt(age));
        //此处得到的式3，只能取到整数
        console.log(parseInt('3.14'));
        //此时得到120，去掉单位
        console.log(parseInt('120px'));
        //得到的结果是NaN
        console.log(parseInt('rem120px'));

        //2.parseFloat(变量) 可以把字符型转换为数字型 得到小数 浮点数
        console.log(parseFloat('3.14'));//结果为3.14,其余类似parsetInt  
    </script>

第三、第四种

<script>
 //3.利用Number(变量)
        var str='123';
        console.log(Number(str));
        console.log(Number('12'));

        //利用运算符- * / 隐士转换
        console.log('12'-0);//结果为12数字型
        console.log('123'-'120');//结果为23
</script>

三：案例：
（1）年龄计算案例：

  <script>
       var year=prompt('请输入你的出生年份');
       var age=2018-year;//隐式转换含有
       alert(age);
    </script>

（2）简单加法器案例

 <script>
       var num1=prompt('请输入第一个值：');
       var num2=prompt('请输入第二个值：');
       var result=num1+num2;//两个都是字符型，结果为num1num2
       //正确操作为
       var result=parseFloat(num1)+parseInt(num2);
       alert('您的结果是'+result);
    </script>

M团子

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Css日记4

一：3D案例：实现一个鼠标通过，立体感的上下翻转，此案例注意的十，上下盒子的位置，先设置下盒子向屏幕方向下爬，也就是x轴度数为正的旋转，再移动到前面盒子的底部，此时移动前面盒子的z轴向往，主要是未来控制立方体的体心在轴上位置。<style> *{ margin: 0; padding: 0; } li{ list-style: none; }
复制链接

扫一扫

Css日记4

“相关推荐”对你有帮助么？