css_transform_skew()中的角度问题_动画演示角度变化

文章目录

reference

skew() - CSS: Cascading Style Sheets | MDN (mozilla.org)

experiment code

这是一个动画,展示了skew()的变化过程(使用了animation来辅助理解)

 <!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta
        http-equiv="X-UA-Compatible"
        content="IE=edge"
    >
    <meta
        name="viewport"
        content="width=device-width, initial-scale=1.0"
    >
    <title>Document</title>
    <style>
        /* skew learning */
        .box_3_1 {
            /* box-sizing: border-box; */
            width: 300px;
            height: 100px;
            border: solid;
            border-top: solid blue 12px;
            border-left: dashed red 12px;
        }
 
        .skewerX {
            /* transform: skewX(45deg); */
            animation: skewerX 5s infinite alternate
        }
 
 
        .skewerY {
            /* transform: skewY(45deg); */
            animation: skewerY 5s infinite alternate
        }
 
 
        .skewer_ani {
            border-radius: 0;
            animation: skewer_frames 10s infinite alternate;
 
            /* transform: skew(15deg, 15deg);
    transform: skew(85deg, 85deg);
    transform: skew(45deg, 60deg);
    transform: skew(45deg, 30deg); */
        }
 
        @keyframes skewer_frames {
            from {
                transform: skew(0deg, 0deg);
            }
 
            /* 两个参数角度和超过90度的时候,容易看出变化规律 */
            to {
                transform: skew(80deg, 40deg);
            }
        }
 
        @keyframes skewerX {
            from {
                transform: skew(0deg, 0deg);
            }
 
            to {
                transform: skew(60deg, 0deg);
            }
        }
 
        @keyframes skewerY {
            from {
                transform: skew(0deg, 0deg);
            }
 
            to {
                transform: skew(0deg, 60deg);
            }
        }
 
        div {
            margin: 15%;
        }
    </style>
</head>
 
<body>
    <section>
        <div class="original">
            <div class="spin ">
            </div>
            <figure class="box_3_1 skewerX">Box X ani</figure>
            <p class="text-align-center">animation: skewerX 5s infinite alternate</p>
            <p>本例子中,我们变化效果相当于操作skewX(),水平边保持和x轴平行,而且矩形高度保持不变</p>
        </div>
        <div class="original">
            <div class="spin ">
            </div>
            <figure class="box_3_1 skewerY">Box Y ani</figure>
            <p class="text-align-center">animation: skewerY 5s infinite alternate</p>
            <p>类似的,垂直边保持和y轴平行,矩形宽度不变</p>
            <p>蓝边和水平轴的夹角最大时刻为设定值:60度</p>
        </div>
 
        <div class="original">
            <div class="spin ">
            </div>
            <figure class="box_3_1 skewer_ani">Box 4</figure>
            <p class="text-align-center">animation: skewer_frames 10s infinite alternate;</p>
            <p>本例子中,我们看到红蓝边发生了上下相对位置发生了交换</p>
            <p>最终,红边和竖直线Y轴的变化为(0->80度)</p>
            <p>蓝边和水平边(x轴)的夹角从(0->40度)</p>
        </div>
    </section>
</body>
 
</html>

效果

在这里插入图片描述

skew()和shear mapping函数

skew() - CSS: Cascading Style Sheets | MDN (mozilla.org)

This transformation is a shear mapping (transvection)(维基百科链接) that distorts each point within an element by a certain angle in the horizontal and vertical directions.

The effect is as if you grabbed each corner of the element and pulled them along a certain angle.

The coordinates of each point are modified by a value proportionate to the specified angle and the distance to the origin.

Thus, the farther from the origin a point is, the greater the value added to it.

posted @ 2023-09-22 15:42 xuchaoxin1375 阅读(9) 评论(0) 编辑收藏举报来源

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· html_css_尺寸调整/调整图片样式(img/max-widht/object-fit)

· css_渐变_多种颜色/stop-colors/纯色区域和渐变区域

· css3之animation、transform、transition

· CSS-精通指南-全-

· Animation.skew

阅读排行：
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了

历史上的今天：
2022-09-22 windows10_北京时间设置UTC+08:00)
2021-09-22 python/javaScript_数制进制转换base conversion problem

公告

昵称： xuchaoxin1375
园龄： 4年10个月
粉丝： 1
关注： 0

+加关注

2025年3月

日

一

二

三

四

五

六

xuchaoxin1375

css_transform_skew()中的角度问题_动画演示角度变化

文章目录

reference

experiment code

效果

skew()和shear mapping函数

公告

搜索

常用链接

随笔档案

阅读排行榜

推荐排行榜

	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta
	http-equiv="X-UA-Compatible"
	content="IE=edge"
	>
	<meta
	name="viewport"
	content="width=device-width, initial-scale=1.0"
	>
	<title>Document</title>
	<style>
	/* skew learning */
	.box_3_1 {
	/* box-sizing: border-box; */
	width: 300px;
	height: 100px;
	border: solid;
	border-top: solid blue 12px;
	border-left: dashed red 12px;
	}

	.skewerX {
	/* transform: skewX(45deg); */
	animation: skewerX 5s infinite alternate
	}


	.skewerY {
	/* transform: skewY(45deg); */
	animation: skewerY 5s infinite alternate
	}


	.skewer_ani {
	border-radius: 0;
	animation: skewer_frames 10s infinite alternate;

	/* transform: skew(15deg, 15deg);
	transform: skew(85deg, 85deg);
	transform: skew(45deg, 60deg);
	transform: skew(45deg, 30deg); */
	}

	@keyframes skewer_frames {
	from {
	transform: skew(0deg, 0deg);
	}

	/* 两个参数角度和超过90度的时候,容易看出变化规律 */
	to {
	transform: skew(80deg, 40deg);
	}
	}

	@keyframes skewerX {
	from {
	transform: skew(0deg, 0deg);
	}

	to {
	transform: skew(60deg, 0deg);
	}
	}

	@keyframes skewerY {
	from {
	transform: skew(0deg, 0deg);
	}

	to {
	transform: skew(0deg, 60deg);
	}
	}

	div {
	margin: 15%;
	}
	</style>
	</head>

	<body>
	<section>
	<div class="original">
	<div class="spin ">
	</div>
	<figure class="box_3_1 skewerX">Box X ani</figure>
	<p class="text-align-center">animation: skewerX 5s infinite alternate</p>
	<p>本例子中,我们变化效果相当于操作skewX(),水平边保持和x轴平行,而且矩形高度保持不变</p>
	</div>
	<div class="original">
	<div class="spin ">
	</div>
	<figure class="box_3_1 skewerY">Box Y ani</figure>
	<p class="text-align-center">animation: skewerY 5s infinite alternate</p>
	<p>类似的,垂直边保持和y轴平行,矩形宽度不变</p>
	<p>蓝边和水平轴的夹角最大时刻为设定值:60度</p>
	</div>

	<div class="original">
	<div class="spin ">
	</div>
	<figure class="box_3_1 skewer_ani">Box 4</figure>
	<p class="text-align-center">animation: skewer_frames 10s infinite alternate;</p>
	<p>本例子中,我们看到红蓝边发生了上下相对位置发生了交换</p>
	<p>最终,红边和竖直线Y轴的变化为(0->80度)</p>
	<p>蓝边和水平边(x轴)的夹角从(0->40度)</p>
	</div>
	</section>
	</body>

	</html>