PHP程序员小白到大牛集训(12期免息)
作者信息

青灯夜游

今天学习一小步,明天提升一大步

最近文章
php怎么去掉含字符串的数组元素588
php怎么只输出数组键值171
php关联数组中怎么去掉空值781
视频教程分类
推荐视频教程
  • php程序员小白到大牛三个月集训php程序员小白到大牛三个月集训
  • Laravel 9 学习正当时—保姆级教程,想学不会都难!Laravel 9 学习正当时—保姆级教程,想学不会都难!
  • 千万级数据并发解决方案(理论+实战)千万级数据并发解决方案(理论+实战)
  • Laravel基础与实战(模块化)Laravel基础与实战(模块化)
  • 首页 >web前端 >前端问答 > 正文

    css3中倾斜的函数是什么

    原创2022-06-01 20:24:231055 关注公众号:每天精选资源文章推送

    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;
    			}
    
    			h1 {
    				color: #4c4c4c;
    				font-weight: 600;
    				border-bottom: 1px solid #ccc;
    			}
    
    			h2,
    			h4 {
    				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>
    		<h1>Css3 倾斜变换</h1>
    
    		<!-- 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>

    1.gif

    (学习视频分享:css视频教程web前端

    以上就是css3中倾斜的函数是什么的详细内容,更多请关注php中文网其它相关文章!

    20期PHP线上班

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。

  • 相关标签:CSS3 css
  • 相关文章

    相关视频


    专题推荐