返回顶部
首页 > 资讯 > 前端开发 > html >css3中倾斜的函数是哪个
  • 919
分享到

css3中倾斜的函数是哪个

2024-04-02 19:04:59 919人浏览 泡泡鱼
摘要

这篇文章主要介绍“css3中倾斜的函数是哪个”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“CSS3中倾斜的函数是哪个”文章能帮助大家解决问题。

这篇文章主要介绍“css3中倾斜的函数是哪个”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“CSS3中倾斜的函数是哪个”文章能帮助大家解决问题。

css3中的倾斜函数有三个:1、skew(),和transfORM属性一起使用可以定义沿着X和Y轴的2D倾斜转换;2、skewX(),和transform属性一起使用可以定义沿X轴的2D倾斜转换;3、skewY(),可定义沿Y轴的2D倾斜。

教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

css3中的倾斜函数有三个:

  • skew()

  • skewX()

  • skewY()

这三个倾斜函数配合transform 属性一起使用(作为属性值使用),就可以实现元素的倾斜。

描述
skew(x轴角度,y轴角度)定义沿着 X 和 Y 轴的 2D 倾斜转换。
skewX(角度)定义沿着 X 轴的 2D 倾斜转换。
skewY(角度)定义沿着 Y 轴的 2D 倾斜转换。

示例:

<!DOCTYPE html>
<html>
	<head> 
		<meta charset="utf-8"> 
		<style>
			*,
			*:after,
			*:before {
				box-sizing: border-box;
			}

			body {
				background: #F5F3F4;
				margin: 0;
				padding: 10px;
				font-family: 'Open Sans', sans-serif;
				text-align: center;
			}

			h2 {
				color: #4c4c4c;
				font-weight: 600;
				border-bottom: 1px solid #ccc;
			}

			h3,
			h5 {
				font-weight: 400;
				color: #4d4d4d;
			}

			.card {
				display: inline-block;
				margin: 10px;
				background: #fff;
				padding: 15px;
				min-width: 200px;
				box-shadow: 0 3px 5px #DDD;
				color: #555;
			}

			.card .box {
				width: 100px;
				height: 100px;
				margin: auto;
				background: #ddd;
				cursor: pointer;
				box-shadow: 0 0 5px #ccc inset;
			}

			.card .box .fill {
				width: 100px;
				height: 100px;
				position: relative;
				background: #03A9F4;
				opacity: .5;
				box-shadow: 0 0 5px #ccc;
				-WEBkit-transition: 0.3s;
				transition: 0.3s;
			}

			.card p {
				margin: 25px 0 0;
			}


			.scaleX:hover .fill {
				-webkit-transform: scaleX(2);
				transform: scaleX(2);
			}

			.scaleY:hover .fill {
				-webkit-transform: scaleY(2);
				transform: scaleY(2);
			}

			.skew:hover .fill {
				-webkit-transform: skew(45deg, 45deg);
				transform: skew(45deg, 45deg);
			}

			.skewX:hover .fill {
				-webkit-transform: skewX(45deg);
				transform: skewX(45deg);
			}

			.skewY:hover .fill {
				-webkit-transform: skewY(45deg);
				transform: skewY(45deg);
			}
		</style>
	</head>
	<body>
		<h2>Css3 倾斜变换</h2>

		<!-- skew-->
		<div class="card">
			<div class="box skew">
				<div class="fill"></div>
			</div>
			<p>skew(45deg, 45deg) </p>
		</div>
		<div class="card">
			<div class="box skewX">
				<div class="fill"></div>
			</div>
			<p>skewX(45deg)</p>
		</div>
		<div class="card">
			<div class="box skewY">
				<div class="fill"></div>
			</div>
			<p>skewY(45deg)</p>
		</div>

	</body>
</html>

css3中倾斜的函数是哪个

关于“css3中倾斜的函数是哪个”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注编程网html频道,小编每天都会为大家更新不同的知识点。

--结束END--

本文标题: css3中倾斜的函数是哪个

本文链接: https://www.lsjlt.com/news/97937.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • css3中倾斜的函数是哪个
    这篇文章主要介绍“css3中倾斜的函数是哪个”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“css3中倾斜的函数是哪个”文章能帮助大家解决问题。 ...
    99+
    2024-04-02
  • html倾斜加粗标签是哪个
    这篇文章主要介绍了html倾斜加粗标签是哪个,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。html倾斜加粗标签分别是<i>标签和<b>标签,其中<...
    99+
    2023-06-14
  • Spark中的数据倾斜是指什么
    Spark中的数据倾斜是指在数据处理过程中,部分数据分区中的数据量远远超过其他分区,导致任务的执行时间不均匀,部分节点负载过重,影响...
    99+
    2024-03-05
    Spark
  • 什么是Spark中的数据倾斜调优
    数据倾斜调优是指在Spark中处理数据时,由于数据分布不均匀导致部分任务处理的数据量远远超过其他任务,从而影响整体作业的性能和效率。...
    99+
    2024-03-05
    Spark
  • css3中2d旋转函数是哪个
    本文小编为大家详细介绍“css3中2d旋转函数是哪个”,内容详细,步骤清晰,细节处理妥当,希望这篇“css3中2d旋转函数是哪个”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。 ...
    99+
    2024-04-02
  • Spark中有哪些数据倾斜优化策略
    在Spark中有多种数据倾斜优化策略,以下是一些常见的策略: 数据预处理:在进行数据处理之前,可以对数据进行预处理,将数据进行切...
    99+
    2024-03-04
    Spark
  • Oracle中利用函数索引处理数据倾斜案例
        本文参考realkid4的博客: http://blog.itpub.net/17203031/viewspace-681311/ ...
    99+
    2024-04-02
  • css3中实现2d旋转的函数是哪个
    这篇文章主要介绍css3中实现2d旋转的函数是哪个,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!css中实现2d旋转的函数是“rotate()”函数。rotate()函数可与tran...
    99+
    2024-04-02
  • html5中斜体标签是哪个
    小编给大家分享一下html5中斜体标签是哪个,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧! html5中斜体标签:1、“i”标签,语法为“<i>斜体...
    99+
    2024-04-02
  • python中替换函数是哪个
    python中替换函数是replace(),该函数语法格式为:“str.replace(old, new[, max])”,它主要是将字符串中的旧字符串替换成新字符串,如果指定第三个参数max,则替换不超过max次。具体使用步骤:首先打开p...
    99+
    2024-04-02
  • Python中坐标函数是哪个
    Python中一般使用coordinate函数定义坐标,使用方法如下:def coordinate(x, y): return { (True, True ) : 1, (True, False) : 2,(False, True ) : ...
    99+
    2024-04-02
  • javascript中删除函数是哪个
    这篇文章主要介绍了javascript中删除函数是哪个,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。JavaScript是什么JavaScript是一种直译式的脚本语言,其解...
    99+
    2023-06-15
  • php中两个数组求交集的函数是哪个
    本篇内容介绍了“php中两个数组求交集的函数是哪个”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!有8个交集函数:1、array_inters...
    99+
    2023-06-30
  • oracle中字符串转日期的函数是哪个函数
    oracle 中将字符串转换成 date 数据类型的函数是 to_date 函数。用法如下:to_date(string_expression, format_mask)string_e...
    99+
    2024-05-08
    oracle
  • css3中实现圆角的属性是哪个
    本篇内容介绍了“css3中实现圆角的属性是哪个”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!css3中实现圆角的是“border-radiu...
    99+
    2023-07-05
  • mysql中哪个是查询求积的函数
    这篇文章将为大家详细讲解有关mysql中哪个是查询求积的函数,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。mysql中查询求积的函数是没有的,但是可以通过“logx+lo...
    99+
    2024-04-02
  • php中判断数组是否存在的函数是哪个
    这篇文章主要讲解了“php中判断数组是否存在的函数是哪个”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“php中判断数组是否存在的函数是哪个”吧!php中判断数组是否存在的函数叫“is_arr...
    99+
    2023-06-30
  • php中求数组最大值的函数是哪个
    php中求数组最大值的函数是“max()”。max()函数可以接收一个包含多个值的数组参数,语法“max(array_values)”,会计算并返回“array_values”数组中的最大值;也可以接收多个比较值参数,语法“max(valu...
    99+
    2022-06-29
    php数组 php
  • php中常用的定义数组的函数是哪个
    array() 函数是 php 中定义数组的常用函数。它接收一个参数列表,其中每个元素对应数组中的值。数组中的键值可以省略(默认为从 0 开始递增),元素顺序很重要,数组可以嵌套。 P...
    99+
    2024-04-27
  • JavaScript中求最小值函数是哪个
    这篇文章给大家分享的是有关JavaScript中求最小值函数是哪个的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。 JavaScript中求最小值函数是...
    99+
    2024-04-02
软考高级职称资格查询
推荐阅读
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作