父元素中同时使用 css3 transform 的 rotate 和 skew 后，子元素如何不受影响？

最新推荐文章于 2024-05-22 11:11:50 发布

CrayonJ

最新推荐文章于 2024-05-22 11:11:50 发布

阅读量2.1k

点赞数 1

文章标签：前端 css3

原文链接：https://www.v2ex.com/t/394630

版权

.father {
	transform: rotateZ(-30deg) skewX(30deg);
}
// 子元素使用transform倒转回来的时候应该将skew和rotate也倒转。transform有前后顺序关系。
.children {
	transform: skewX(-30deg) rotateZ(30deg);
}

原出处：(https://www.v2ex.com/t/394630)

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

CrayonJ

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

父元素transform对子元素绝对定位的影响

weixin_51364599的博客

02-24

3736

<div style="transform: rotate(0);width: 20px;height: 20px;background-color: red;"> <div style="position: absolute;left: 0;top: 0;width: 5px;height: 5px;background-color: yellow;"></div> </div> 由上述代码可知子元素添加position:a...

css3transform:skew(),CSS3变形倾斜(CSS3 Transform Skew)

weixin_34961316的博客

08-03

1007

CSS3变形倾斜(CSS3 Transform Skew)有谁知道如何实现这样的倾斜：使用CSS的新变换属性？你可以看到我正在扭曲两个角落，任何人都知道这是否可行？Does anyone know how to achieve skew like this: Using CSS's new transform property?As you can see I'm trying to skew ...

参与评论您还未登录，请先登录后发表或查看评论

css特效之父元素转动，子元素始终保持正的（公转不自转）

qq_43217258的博客

03-21

2012

帮忙写了下，解决了旋转问题（公转不自转），但是五个子元素靠定位是没用的，想到大学老师教的偏移属性，找啊找，找到了。冲突，不能用在一个元素上，室友的方法是拆了，子元素转就行了，我不想写这么多重复代码，就想到，我多套一个盒子，然后转变思路，父转，子反方向转，但是因为无法定位元素位置，用的绝对定位的手动位置，根本算不准，导致出问题。需求：五个东西跟着父元素转，但是保持正面朝上。我开始的思路是：让父盒子转就行了。前端自学群计算机专业硕士女同学（不放一起就行了，解决了。

css transform rotate 不影响子元素

zebraMeat的博客

12-12

3080

直接获取不到rotate角度 console.log($("#mapid" + element).parent("div").css("transform")); 输出为解决方法： var nowDeg=0; if($("#mapid" + element).parent("div").css("transform")!='none'){ var values = $("#mapid" ...

css卡片翻转父元素翻转子元素不翻转效果

最新发布

weixin_43858851的博客

05-22

1324

css卡片翻转父元素翻转子元素不翻转效果

CSS中transform对fixed定位的影响-父级加上了transform属性之后就会影响子级的固定定位

学习记录总结分享

02-03

2155

我们知道，设置了position: fixed固定定位属性的元素会脱离文档流，达到“超然脱俗”的境界。也就是说此时给这种元素设置top, left, right, bottom等属性是根据浏览器窗口定位的，与其上级元素的位置无关。

CSS3 transform的skew属性值图文详解

09-25

CSS3中的transform属性允许开发者对HTML元素进行一系列的二维和三维变形操作，包括旋转（rotate）、缩放（scale）、倾斜（skew）和移动（translate）。其中，skew属性可以使得元素在二维平面上进行倾斜变形。这篇...

CSS3中的transform属性进行2D和3D变换的基本用法

09-24

CSS3中的transform属性是前端开发中用于元素变形的常用工具，它不仅能够实现二维（2D）空间的变换，还能完成三维（3D）空间的变换效果。在进行介绍之前，我们先要了解transform属性的基本概念和其作用。首先，...

浅析CSS3 中的 transition，transform，translate之间区别和作用

11-21

在CSS3中，`transition`、`transform`和`translate`是三个非常重要的概念，它们分别用于创建不同的视觉效果和动态交互。理解这三个概念的区别和作用对于构建具有现代感和用户体验良好的网页至关重要。首先，`...

css3 transform属性利用伪元素制作字母卡片开关门

12-13

综上所述，这个项目展示了如何利用CSS3的`transform`属性和伪元素来创建引人入胜的3D交互效果，是学习和掌握CSS3动画技术的一个好例子。同时，了解项目结构和文件关系，有助于提升开发者在实际开发中的组织和管理...

父子元素同时使用rotate的效果叠加

xiongshiyuan的博客

10-07

1661

今天在做页面设计的时候使用到了transform：rotate（）；突然有一个想法，如果父元素使用了rotate ，子元素也使用了rotate，效果会发生什么叠加，叠加效果又是什么样的呢？？？所以做了一个测试：首先通过布局使父子元素的X轴和Y轴重合，然后改变父子元素rotateX的值，观察效果。 /*css*/ .cover-container { ...

python transform=none_将被父元素transform影响的子元素设为none，但不起作用，是什么原因，F12显示transform：none是正常的。...

weixin_39707693的博客

12-09

978

testbody{background-color: #eee;}li{list-style: none;}ul{display: flex;flex-direction: row;}ul li{width: 234px;height: 260px;padding:20px 0;margin:0 0 14px 14px;background-color: #fff;text-align: cent...

关于CSS3中transform属性对元素布局的影响。

C860_zy的专栏

12-26

5331

今天了解transform属性时发现一个奇怪的现象，就是使用transform属性的时候，无论是translate,rotate,skew还是scale，对于伪元素:after和:before，都会产生影响。具体的这个影响体现在哪里呢？我们通过一个例子来看一看（以下代码均针对webkit内核浏览器，其它浏览器鄙人还未去尝试）：先贴代码：

cocos2dx 父元素影响子元素

weixin_30784141的博客

08-08

如果a中又b。设置a的scaleX，a->getboudingbox会变化，contentsize不变化 子元素显示方面也会变化，同样的缩放比例。 子元素和父元素一起变化的属性还有，rotation/skewx/color 子元素不喝父元素一起变化的属性有：opacity/ 转载于:https://www.cnblogs.com/say-one-say/p/3898685.html...

css3中关于transform rotate、translate()、skew()、scale()的复合变换

kbx8916的博客

03-27

2070

css3中这几个rotate、translate、skew()、scale()要同时使用只要在一行的transform中用空格隔开。 eg:transform:rotate(30deg) translate(100px,100px) skew(20deg); but: 在rotate之后再进行translate()、skew()、scale()时,x轴y轴不再是绝对水平或绝对竖直，而

CSS3 属性 transform 对其他元素的一些渲染影响及原理

__竹子__的博客

03-29

2901

影响：1、transform 会提高普通元素的垂直地位；2、transform 会让 fixed 子元素变成类似 absolute 的效果；3、transform 会影响 absolute 子元素100%宽度的计算基准；4、transform 会影响 absolute 子元素的定位基准；5、transform 会改变 overflow 对 absolute 元素的限制。涉及的原理：层叠上下文；包含块；overflow

CSS transform的rotate，内部元素旋转到背后仍会显示。

cithegod的博客

11-09

6989

在写代码的时候出现了一个问题，当使用了CSS3的transform的时候，对下面这个元素进行旋转：//DOM元素的结构 <figure class="img-figure"> <img src="/assets/97aa04cee801bdd3b8762057267d0767.jpg" alt="This is a beauty"> <figcaption> <h2

CSS3-transform-transform影响子级的固定定位

Zerofishcoding的博客

11-15

4087

在进行限制范围拖拽代码编写时，父级为固定定位，子级为固定定位，给父级加transform，html和css代码分别如下：

面试总结——CSS

lixh_0142的博客

12-02

427

1.transform对子元素的影响当父元素设置transform属性时，子元素也会受到影响，例如，父元素旋转45deg，子元素也会旋转45deg，如果要消除这种影响，可以通过给子元素设置-45deg。 2.垂直水平居中的几种方式已知宽高：未知宽高 3.常用的几种布局方式这里集中往盒模型和flex布局上说。首先最常见的就是盒...