关于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"，使原点设置在元素左上角

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

CSS3中（border-radius）边框圆角详解
传统的圆角生成方案,必须使用多张图片作为背景图案.CSS3的出现,使得我们再也不必浪费时间去制作这些图片了,只需要border-radius属性,支持浏览器IE 9.Opera 10.5.Safari ...
css3中的多列布局columns详解
columns语法:columns:[ column-width ] || [ column-count ] 设置或检索对象的列数和每列的宽度其中:[ column-width ]:设置或检索对象每 ...
Java CSS3：（七）CSS3 中常用的样式（跳动的心）
CSS3 中常用的样式-跳动的心做一个跳动的心做一个跳动的心 <!DOCTYPE html> <html><head><meta charset=&quo ...
html 结合3d效果,HTML和CSS3中的2D、3D结合实现动画效果
这篇文章给大家介绍的内容是关于HTML和CSS3中的2D.3D结合实现动画效果,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 虽然我们我们在前端工作中,对于2D.3D动画效果一般来说 ...
php 修改 wordpress,修改WordPress中文章编辑器的样式的方法详解
这篇文章主要介绍了修改WordPress中文章编辑器的样式的方法详解,同时文中也推荐了两款取代默认文章编辑器的插件,需要的朋友可以参考下自定义文章编辑器的样式每一个 WordPress 主题的文章样 ...
css样式继承规则详解
css样式继承规则详解一.总结一句话总结:继承而发生样式冲突时,最近祖先获胜(最近原则). 1.继承中哪些样式不会被继承? 多数边框类属性,比如象Padding(补白),Margin(边界),背景 ...
node怎么解析vue代码_vue中node_modules中第三方模块的修改使用详解
最近用vue在做一个项目,github用上找了一个日历插件,intall到了本项目中,配好以后发现插件的样式风格和项目总体风格相差较大,所以就像这个改一下插件风格, 第一种方法:我直接在父组件中将st ...
java excel中重复数据事务处理_Java导出excel时合并同一列中相同内容的行思路详解...
一.有时候导出Excel时需要按类别导出,一大类下好几个小类,小类下又有好几个小小类,就像下图: 要实现这个也不难, 思路如下:按照大类来循环,如上就是按照张江校区.徐汇校区.临港校区三个大类循环,然 ...
java 导出如何合并列_Java导出excel时合并同一列中相同内容的行思路详解
一.有时候导出Excel时需要按类别导出,一大类下好几个小类,小类下又有好几个小小类,就像下图: 要实现这个也不难, 思路如下:按照大类来循环,如上就是按照张江校区.徐汇校区.临港校区三个大类循环,然 ...

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

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

最新文章

热门文章