Css3之画菱形和平行四边形

今天我们来学习css3的一个属性transform，下面我们先来学习下transform如何使用，然后通过两个例子看看transform的强大之处
Transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等。

Formal grammar: []* | none

transform: none
transform: matrix(1.0, 2.0, 3.0, 4.0, 5.0, 6.0)
transform: translate(12px, 50%)
transform: translateX(2em)
transform: translateY(3in)
transform: scale(2, 0.5)
transform: scaleX(2)
transform: scaleY(0.5)
transform: rotate(0.5turn)
transform: skewX(30deg)
transform: skewY(1.07rad)
transform: matrix3d(1.0, 2.0, 3.0, 4.0, 5.0, 6.0, 7.0, 8.0, 9.0, 10.0, 11.0, 12.0, 13.0, 14.0, 15.0, 16.0)
transform: translate3d(12px, 50%, 3em)
transform: translateZ(2px)
transform: scale3d(2.5, 1.2, 0.3)
transform: scaleZ(0.3)
transform: rotate3d(1, 2.0, 3.0, 10deg)
transform: rotateX(10deg)
transform: rotateY(10deg)
transform: rotateZ(10deg)
transform: perspective(17px)transform: translateX(10px) rotate(10deg) translateY(5px)

下面我简单的介绍几种比较常用的方法

一、旋转rotate
rotate() ：通过指定的角度参数对原元素指定一个 2D rotation （2D 旋转），需先有transform-origin属性的定义。transform-origin定义的是旋转的基点，其中angle是指旋转角度，如果设置的值为正数表示顺时针旋转，如果设置的值为负数，则表示逆时针旋转。如：transform:rotate(30deg)

二、移动translate

移动translate我们分为三种情况：translate(x,y)水平方向和垂直方向同时移动（也就是X轴和Y轴同时移动）；translateX(x)仅水平方向移动（X轴移动）；translateY(Y)仅垂直方向移动（Y轴移动），具体使用方法如下：

水平居中

.transform{width:200px;height:200px;background-color:red;position:absolute;top:50%;left:50%;border-radius: 5px;-webkit-transform: translate(-50%,-50%);-moz-transform: translate(-50%,-50%);transform:translate(-50%,-50%);}

三、缩放scale

缩放scale和移动translate是极其相似，他也具有三种情况：scale(x,y)使元素水平方向和垂直方向同时缩放（也就是X轴和Y轴同时缩放）；scaleX(x)元素仅水平方向缩放（X轴缩放）；scaleY(y)元素仅垂直方向缩放（Y轴缩放），但它们具有相同的缩放中心点和基数，其中心点就是元素的中心位置，缩放基数为1，如果其值大于1元素就放大，反之其值小于1，元素缩小。下面我们具体来看看这三种情况具体使用方法：

.transform:hover{transform: scale(1.2);
}

鼠标移上去放大1.2倍

四、扭曲skew

扭曲skew和translate、scale一样同样具有三种情况：skew(x,y)使元素在水平和垂直方向同时扭曲（X轴和Y轴同时按一定的角度值进行扭曲变形）；skewX(x)仅使元素在水平方向扭曲变形（X轴扭曲变形）；skewY(y)仅使元素在垂直方向扭曲变形（Y轴扭曲变形），具体使用如下：
transform:skew(30deg,10deg):

/*平行四边形*/.Parallelogram{width:200px;height: 100px;background: #FFFF00;margin: 50px auto;/*skew两个参数，第一个x，第二个y*/transform: skew(20deg);-webkit-transform: skew(20deg);-moz-transform: skew(20deg);-o-transform: skew(20deg);}

Css3之画菱形和平行四边形相关推荐

7-132 画菱形 (10 分) 菱形是一种特殊的平行四边形，是四条边均相等的平行四边形。给出菱形的边长n，用*画出菱形。 PTA：中M2021春C、Java入门练习第I段——变量、表达式、分支、循环
7-132 画菱形 (10 分) 菱形是一种特殊的平行四边形,是四条边均相等的平行四边形.题目给出菱形的边长n,用*画出菱形.如n=1,输出: n=2,输出: n=3,输出: 那么,你能用程序来实现么 ...
html 直线变曲线,CSS3怎么画曲线？
CSS3怎么画曲线?下面本篇文章给大家介绍一下CSS3画曲线的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. CSS3怎么画曲线? 大家都知道,CSS3中border已经可以实 ...
用java画菱形_【风马一族_Java】使用java,画出任意大小的菱形
1 public classrhombic {2 3 public static voidmain(String[] args){4 5 /** 6 * scriber()画菱形的方法,参数 9 是指 ...
css3半圆弧线,css3实现画半圆弧线的示例代码
本文介绍了css3实现画半圆弧线的示例代码,分享给大家,具体如下: css代码 .circle1 { width: 100px; height: 200px; border: 1px solid bl ...
HTML怎么做出菱形框架,css3怎么实现菱形渐变？
本篇文章介绍了css3实现菱形渐变的效果,有着一定的参考价值,现在将它分享给各位,希望对各位有帮助. css3怎么实现菱形渐变 1.实现菱形渐变,首先需要实现一个菱形,使用了clip-path属性:. ...
用星星画菱形--Java
用星星画菱形 public class Hello{public static void main(String[] args) {char star = '\u2605';System.out.pr ...
visio画网格(包括平行四边形)
矩形网格添加正方形. 视图–>加载项–>运行加载项. 选择排列形状设置如下结果展示平行四边形网格以4x4平行四边形网格为例. 首先画一个大平行四边形,边长为100,倾斜角度为45 ...
C语言实现画菱形的数学方法VS一般方法
文章目录前言一.方法一二.方法二注意总结前言本文介绍了两种用C语言画菱形的方法.当然两种方法有优有劣,究竟喜欢哪一种,全凭诸君自己.当然,我更偏向于方法二. 一.方法一基于双重for循 ...
2023年春节祝福第二弹——送你一只守护兔，让它温暖每一个你【html5 css3】画会动的小兔子，炫酷充电，字体特效
2023年春节祝福第二弹送你一只守护兔,让它温暖每一个你! [html5 css3]画一只会动的兔子目录一.送你一只守护兔,效果图二.前言三.代码解释及部分特效教程 (1).css3 立体字 ...
HTML如何画一段弧,css3如何画圆弧
css3如何画圆弧.circle1 { width: 100px; height: 200px; border: 1px solid black; border-radius: 100% 0 0 10 ...

Css3之画菱形和平行四边形

Css3之画菱形和平行四边形相关推荐

最新文章

热门文章