【html5与css3】旋转

最新推荐文章于 2022-10-29 09:40:56 发布

晓秒四下

最新推荐文章于 2022-10-29 09:40:56 发布

阅读量173

点赞数

本文链接：https://blog.csdn.net/MENGCHIXIANZI/article/details/110528919

版权

html css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

【复习】

行间元素变成块状元素的几种方式

display：block / inline-block / table
float：left/right
position：abosoled/fixed
overflow：hidden（这个不可以）

html 超文本标记语言结构 css 层叠样式表表现 js 脚本语言行为

js 基础题

window.onload = function(){ var a = 10; } alert(a) // 应该输出来的是 undefined 因为变量提升事件函数内部的变量在函数内部（错了会报错！！！）

作用域作用在一块区域的函数里面声明的变量函数外面是拿不到

报错是因为先加载的 alert(a) 后加载的 onload 的事件函数

每个作用域里都有自己的预解析（所有 var 的东西都过一遍）

当你不写 var 的时候就会被自动认为是 window的谁谁了

parent 也是 window 还有 top 也是 self 也是 this 也是

js 报错 1 编译错误 2 语法错误

【html5】

html5 w3c 协议

css3 升级版的css

es6 等等

video audio canvas

video 视频 MP4

背景颜色为黑可以通过饱和度来设定 hsl （例如 hsl(167,0%，0%)为黑色）

【css3】

transition 过度动画

transition-delay 延时 1s 简写的时候延时时间在最后

transition-timing-function 加速减速 ease 线性运动过度的动画形式

transition-duration 运动时间 1s

transition-property 要运动的样式比如写一个 all 比如只过度 width

默认缩写 0s all ease 0s

transform 变换式

rotate 旋转 transform: rotate(1turn); 1turn = 360deg

rotateX / rotateY X轴翻转 Y轴翻转

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color:rgb(red, green, blue);
            
            /* 居中 */
            position:absolute;
            left: 0;
            right: 0;
            top:350px;
            bottom: 0;
            margin:0 auto;

            /* transition-delay: 0.1s;
            transition-timing-function: ease;
            transition-duration: 1s;
            transition-property: all;  */
            transform: perspective(0px);
            /* transition: 1s; */
            
        }
        /* div:hover{ */
            /* width: 200px;
            height: 200px; */
            /* transform: rotate(90deg); */
            /* transform: rotate(1turn); */
            /* transform: perspective(600px) rotateX(90deg); */
        /* } */
    </style>
    <div id='div1'></div>
    <script type="text/javascript">
        
        onload = function(){
            var deg = 0;
            // var flag = false;
            // var r,b,g;
            var r = parseInt(Math.random() * 255) + 1;
            var b = parseInt(Math.random() * 255) + 1;
            var g = parseInt(Math.random() * 255) + 1;
            var flag = 0;
            setInterval(function(){
                

                deg++;
                if(flag == 0){
                    div1.style.transition = "0s";
                    div1.style.transform = "perspective(600px) rotateY(" + deg + "deg)";
                }else if(flag == 1){
                    div1.style.transition = "0s";
                    div1.style.transform = "perspective(600px) rotateX(" + deg + "deg)";
                }else if(flag == 2){
                    div1.style.transition = "1s";
                    div1.style.transform = "scale(2,1)";
                }
                div1.style.background = "rgb("+ r +"," +b +","+ g +")"
                deg = deg>360?0:deg;
                if(deg == 0){
                    // flag = !flag;
                    flag++;
                    if(flag>2){
                        flag = 0;
                    }
                    r = parseInt(Math.random() * 255) + 1;
                    b = parseInt(Math.random() * 255) + 1;
                    g = parseInt(Math.random() * 255) + 1;
                }
            },8);

        }
    </script>
</body>
</html>

skew(skewx,skewy) 扭曲倾斜 deg

scale(scalex,scaley) 宽高变化当负数值的时候会镜像

https://www.cnblogs.com/pythonywy/p/11833032.html 很有意思

桃ちゃん

晓秒四下

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【html5与css3】旋转

行间元素变成块状元素的几种方式display：block / inline-block / table float：left/right position：abosoled/fixed overflow：hidden（这个不可以）html 超文本标记语言结构 css 层叠样式表表现 js 脚本语言行为js 基础题window.onload = function(){ var a = 10;} alert(a) // 应该输出来的是 undefined 因为变量提升事件函数.
复制链接

扫一扫