css3_2d

我不是女神ヾ 2022-05-25 05:12 238阅读 0赞

1. 2d-旋转

<div class="rotate">rotate</div>

.rotate\{width:200px;height:100px;border:1px solid red;margin:50px auto;background:\#0F9;\}

.rotate:hover\{

/\*旋转\*/

transform:rotate(30deg);

\-moz-transform:rotate(30deg);/\*火狐\*/

\-ms-transform:rotate(30deg);/\*IE9\*/

\-webkit-transform:rotate(30deg);/\*苹果和谷歌\*/

\-o-transform:rotate(30deg);/\*opera\*/

\}

![20180508162308959][]

2. 2d-移动

<div class="translate">translate</div>

.translate\{width:200px;height:100px;border:1px solid red;margin:10px auto;background:\#39F;\}

.translate:hover\{

/\* 把元素从左侧移动 10 像素，从顶端移动 20 像素 \*/

transform:translate(10px,20px);

\}

![20180508162338615][]

![20180508162347937][]

3. 2d-放缩

<div class="scale">scale</div>

.scale\{width:200px;height:100px;border:1px solid red;margin:10px auto;background:\#396;\}

.scale:hover\{

/\* 把宽度转换为原始尺寸的 2 倍，把高度转换为原始高度的 2 倍。\*/

transform:scale(2,2);

\}

![20180508162410947][]

4. 2d-翻转

<div class="skew">skew</div>

.skew\{width:200px;height:100px;border:1px solid red;margin:10px auto;background:\#FFC;\}

.skew:hover\{

/\*  围绕 X 轴把元素翻转 20 度，围绕 Y 轴翻转 10 度。\*/

transform:skew(20deg,10deg);

\}

![20180508162435115][]

5. 2d-整合

<div class="matrix">matrix</div>

.matrix\{width:200px;height:100px;border:1px solid red;margin:10px auto;background:\#C6C;

/\* 将所有2D方法合到一起，6个参数：，，，，右移，下移 \*/

transform:matrix(0.866,0.5,-0.5,0.866,0,0);

\}

将上面的几种属性整合到同一个属性中，matrix有6个参数。具体含义不是很清楚，试了一下最后两参数是右移和下移，其他参数不是很明显，因为实战中不希望使用它，先不去深究它，真需要用它时再来补充。

[20180508162308959]: /images/20220525/2390ce25c7064353b0e0f6704554a242.png
[20180508162338615]: /images/20220525/7da22e8a13c44368b771986cd163e358.png
[20180508162347937]: /images/20220525/c15639b698da457eb38fe8ca79111b49.png
[20180508162410947]: /images/20220525/e0efb41335ef4805b3f7803ae71ba9ba.png
[20180508162435115]: /images/20220525/66595ffa519c443383908cc59168e9cf.png

发表评论取消回复

表情：

评论列表（有 0 条评论，238人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS2D转换

文章目录 2D转换 2D 转换之移动 translate 2D 转换之旋转 rotate 2D

柔情只为你懂/ 2024年03月17日 18:29/ 0 赞/ 131 阅读

相关 3D移动translate3d（CSS3）

3D移动translate3d（CSS3） <!DOCTYPE html> <html lang="en"> <head>

叁歲伎倆/ 2023年10月03日 13:39/ 0 赞/ 46 阅读

相关 CSS3-2D

一.兼容性问题： div { transform: translate(50px,100px); -ms-transform:

た入场券/ 2023年07月10日 08:59/ 0 赞/ 20 阅读

相关 css 2d转换_使用CSS进行2D转换

css 2d转换 CSS | 2D转换 (CSS | 2D Transformation) 2D transformation in CSS allows you to

蔚落/ 2023年03月05日 12:35/ 0 赞/ 24 阅读

相关 CSS3 2D/3D转换

Internet Explorer 10、Firefox 以及 Opera 支持 transform 属性。 Chrome 和 Safari 需要前缀 -webkit-。

分手后的思念是犯贱/ 2022年09月21日 05:36/ 0 赞/ 313 阅读

相关 RISC-V数据模型，-mabi=ilp32, ilp32f, ilp32d, lp64, lp64f, lp64d

RISC-V GCC通过`-mabi`选项指定数据模型和浮点参数传递规则。有效的选项值包括ilp32、ilp32f、ilp32d、lp64、lp64f 和 lp64d。前半部分

谁践踏了优雅/ 2022年05月31日 11:29/ 0 赞/ 224 阅读

相关 css3_2d

1. 2d-旋转 <div class="rotate">rotate</div> .rotate\{width:200px;height:100px;border:1p

我不是女神ヾ/ 2022年05月25日 05:12/ 0 赞/ 239 阅读

相关 CSS3 2D 转换

CSS3 2D 转换 Internet Explorer 9 需要前缀 -ms-。 Firefox 需要前缀 -moz-。 Chrom

比眉伴天荒/ 2022年03月18日 13:26/ 0 赞/ 282 阅读

相关 CSS 3D House

代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or

电玩女神/ 2021年11月11日 23:32/ 0 赞/ 245 阅读

相关 css3动画（2D）

响应式布局 1.使用相对单位 % rem vh vw 2.使用媒体查询，相当于在不同的情况下写了一套CSS样式 3.借助UI 框架，因为UI是别人封装好的响应式。

Bertha 。/ 2021年11月02日 07:06/ 0 赞/ 464 阅读