关于css3中的2d样式skew倾斜详解

简介:

在css3中,transform有个属性skew,能使元素产生倾斜效果,不少小伙伴接触到时都很费解,为什么倾斜效果和自己想的不一样,当然网上也有不少死记硬背规律口诀的方法,但我个人觉得都不是很好,所以这里我详细讲解其中的变换原理

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>倾斜讲解</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        div {
            width: 300px;
            height: 300px;
            background-color: red;
            margin: 50px auto;
            font-size: 50px;
            color: white;
            /*transition: all 1s;*/
        }

        div:hover {
            /*2d x轴朝下,y轴朝右,(x,y)也就是旋转角度都是以偏向该第一坐标系的为正*/
            /*1:*/
            transform-origin: top left; /*//作用,以左上角建立坐标系*/
            transform: skew(45deg, -30deg);
        }
    </style>
</head>
<body>
<div>我是要倾斜的盒子</div>
</body>
</html>

skew(45deg,-30deg) 最终的效果图如下:


详解原理:

1.首先理解这里2d的坐标系与平常不一样,这里x轴竖直向下为正,y轴水平向右为正,所以右下角才是第一象限

2.右下角第一象限很重要,因为skew(x,y)这里的x,y偏移角度,都是以偏向第一象限才为正值角度,否则为负值

3.解释skew(45deg,-30deg),x轴(数值方向)朝第一象限偏移45度,刚好符合,y轴(水平方向)远离第一象限偏移30度,因为为负值,也刚好符合,所以元素倾斜成这个样子

4,整个元素坐标系的原点原本默认为元素中心,本例中通过设置样式"transform-origin:left top",使原点设置在元素左上角


展开阅读全文

倾斜--skew

06-10

<p style="color:#666666;">rn <span style="color:#FF0000;"><strong>课程目标:</strong></span><br />rn本季课程引入了CSS3众多功能中的新特性,让设计和开发人员能够轻松的创作出各种精美的界面效果。整合 HTML5 &amp; CSS3 最强大效果,有的是网站开发中常用的、实用的功能,有的是先进的 Web 技术的应用演示。不管哪一种,这些案例中的技术都值得我们去探究和学习。rn</p>rn<p style="color:#666666;">rn <br />rn</p>rn<p style="color:#666666;">rn <br />rn</p>rn<p style="color:#666666;">rn <span style="color:#FF0000;"><strong>课程介绍:</strong></span> rn</p>rn<p style="color:#666666;">rn 本季课程为CSS特效篇,着重介绍了使用CSS使用页面的特效以实现页面的美化。<br />rn内容包含:rn</p>rn<p style="color:#666666;">rn ◆&nbsp;绘制各种图形rn</p>rn<p style="color:#666666;">rn ◆&nbsp;设置容器的背景图片rn</p>rn<p style="color:#666666;">rn ◆&nbsp;实现多张背景图的拼接rn</p>rn<p style="color:#666666;">rn ◆&nbsp;实现背景色的渐变rn</p>rn<p style="color:#666666;">rn ◆&nbsp;使用阴影美化容器或者图片rn</p>rn<p style="color:#666666;">rn ◆&nbsp;实现二维空间中图像的移动、旋转、缩放倾斜等rn</p>rn<p style="color:#666666;">rn ◆&nbsp;实现三维空间中的图像的移动、旋转、缩放等rn</p>rn<p style="color:#666666;">rn ◆&nbsp;在页面中灵活使用过度的特效rn</p>rn<p style="color:#666666;">rn ◆&nbsp;在页面中使用动画的特效rn</p>rn<p style="color:#666666;">rn ◆&nbsp;使用下拉菜单等内容。rn</p>rn<p style="color:#666666;">rn <br />rn</p>rn<p>rn 在本季课程的讲解中结合了大量的案例演示,通过案例演示可以清楚的加深对CSS常见数据的理解, 学习的过程中,一定要动手实战,这样才能真正的领悟到CSS特效的使用细节rn</p>rn<p>rn <br />rn</p>rn<p>rn <img src="https://img-bss.csdn.net/201906100423071469.png" alt="" />rn</p>rn<p>rn <br />rn</p>rn<p>rn <strong><span style="color:#E53333;">以下为课程项目展示:</span></strong> rn</p>rn<p>rn <img src="https://img-bss.csdn.net/201906100423402313.png" alt="" />rn</p>rn<p>rn <img src="https://img-bss.csdn.net/201906100423581007.gif" alt="" /><img src="https://img-bss.csdn.net/201906100424107294.gif" alt="" /><img src="https://img-bss.csdn.net/201906100424216354.gif" alt="" />rn</p>rn<p>rn <img src="https://img-bss.csdn.net/201906100422498129.png" alt="" />rn</p>

没有更多推荐了,返回首页