文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

图片不变形，宽高不超出父元素的情况下旋转图片

demo 如题，具体的效果见这里 。做这样的效果的难点在于，计算没旋转前图片的宽，高和旋转后的宽高。 下面来看具体的实现。 实现步骤 让图片在父元素中水平居中，垂直居中显示。我用的是 flex。.../* 图片的父元素 */ .img-wrap{ display: flex; justify-content: center; align-items: center; height:...我们知道图片在旋转 (2n * 90)度在父元素的宽高是一样的，((2n + 1) * 90) 度在父元素的宽高是一样的。...图片的宽和高要满足 不超出父元素 图片不能变形 在上面的条件下，图片的宽高只有有限的值可以选。...在 旋转 (2n * 90) 度的情况下 图片的宽为父元素的宽，高度自适应 图片的高为父元素的高，宽度自适应 在 旋转((2n + 1) * 90) 度的情况下 图片的宽为父元素的高，高度自适应 图片的高为父元素的宽

2.1K30

transform属性的空间转换

使用transform属性实现元素在空间内的位移、旋转、缩放等效果。 空间转换也叫3D转换，是从坐标轴角度定义的，x y z三条坐标轴构成了一个立体空间，z轴位置与是想方向相同。...给父级添加属性： perspective:值; 取值：像素单位数值， 数值一般在800 – 1200。 还需要通过空间转换，为元素添加近大远小、近实远虚的视觉效果来实现。...空间旋转 使用 rotate实现元素空间旋转效果。...步骤： 先给盒子父元素添加 transform-style: preserve-3d; 按照需求设置子盒子的位移位置或旋转位置。 在空间内，转换元素都有自己独立的坐标轴，互补干扰。...，毕竟显示屏是一个平面的屏幕，非要想象一个空间立体形状是很难的，而现在大多数网站追求的是扁平化设计，所以一个具有立体空间特效的网站还是很炫酷的。

78710
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    【CSS】770- 多层嵌套的CSS 3D动画技术详解

    CSS动画是当前一种非常火爆的技术，我说的并不是一些简单的颜色变换或长短属性变换，我说的是3D变换技术；纯CSS实现的翻滚旋转立方体就是最典型的例子。...perspective属性必须应用到需要做3D变换的元素的父元素上。在WebKit浏览器里，只要是它的祖先元素都行，但在火狐或IE里只能是父元素。...看起来门的动画效果被门框的摆动抵消了。的确，事情就是这样，因为transform-style属性(用来告诉浏览器一个具有3D变换属性的子元素是否附随父元素的3D变换属性)的缺省值是flat。...这样，我们就可以看到更自然的效果了： 但是，IE10/11只支持transform-style的flat值。有时我们会利用这种技术将父元素和子元素通过3D变换串联起来。...代码不是很多，也不是很乱…然而，当我们想旋转这个立方体时却出现了问题。

    1.1K20

    css3 2d与3d变形

    2d变形 transform: none | transform-function 1.rotate(角度) Rotate（45deg）往右旋转 Rotate（-60deg）往左旋转 2.translate...: 50% 50%;透视的角度（从哪个视线看） 3d效果： 移动 translate3d(x轴位移 ,y轴位移, z轴上的位移); z轴方向正方向移动了（也就是说离得近了），看起来就是变大的效果...translateX() translateY() translateZ() 缩放 transform: scale3d(X轴方向放大,y轴方向放大,z轴方向放大); z轴不影响盒子的大小 transform...:scale3d(1.2,1.2,2) translateZ(50px);scale3d和translateZ配合使用scale3d的z就管用了 scaleX() scaleY() scaleZ()...(角度) RotateZ(角度) transform-style:preserve-3d | flat; Flat是默认值，是扁平化的意思 preserve-3d让transform元素保留内部3d

    26320

    CSS | 视差滚动 | 笔记

    scroll 背景相对于元素本身固定，而不是随着它的内容滚动（对元素边框是有效的）。 对父元素 css_demo 设置 overflow: scroll， 当元素内容超出页面时滚动。...transform 是一个属性，用于对元素进行变换（transformations） 它可以改变元素的位置(平移 translate)、大小(缩放 scale)、旋转角度(旋转 rotate) 和形状等...z>0 的三维元素比正常大，而 z时则比正常小，大小程度由该属性的值决定。 元素涉及 3d 变换时，perspective可以让我们眼睛看到 3d 立体效果，有空间感。...当一个层的 translateZ 值为负时，它会向内移动，也就是朝向观察者的方向。 这样的移动会使层看起来更接近观察者，产生较强的视差效果。 在视差滚动中，这种效果可以让层看起来更大、更突出。...相反，当一个层的 translateZ 值为正时，它会向外移动，也就是远离观察者的方向。 这样的移动会使层看起来更远离观察者，产生较弱的视差效果。在视差滚动中，这种效果可以让层看起来较小、较平面。

    81521

    CSS 3D动画概述菜鸟级解读之一

    就像这张图，黄色的部分，perspective直接写在色块上，紫色的部分，perspective写在了父容器上，以画布作为透视元素，所以子元素的形态都是不一样的。 ?...就像一个离你很远的正方体（比如魔方）在做旋转，他的视觉效果就比较弱，但是如果这个魔方在你的眼前旋转，那么效果就比较强烈。 而这里我们会用到一个新的Transform的参数，translateZ。...前面rotateZ已经让我们找到了Z轴，translateZ就可以用来处理Z轴的坐标。让元素在自己的眼前或近或远。他的值是要参考父元素的perspective值。...比如父元素的perspective值是800，那么子元素translateZ的值越小，就表示子元素离我们越远，看起来也就越小。...当子元素的translateZ接近800但是小于800的时候，比如790+，那么这个元素会撑满整个屏幕（注意，会超出浏览器），因为这个时候表示这个元素已经到了你眼前，眼前就是一片小树叶也是可以遮挡住后面所有东西的

    1K80

    05_2D3D转换

    语法： transform: rotate(角度); transform: rotate(45deg); 注意： rotate 里面跟度数，单位是 deg 角度为正时，顺时针旋转 角度为负时，逆时针旋转...1.3.1 旋转中心点 rotate 旋转时，默认是以盒子的正中心为坐标原点的。 如果想改变 2D 转换的中心点，可以用 transform-origin 属性，可以设置元素转换的中心点。...（透视要写在被观察元素的父元素上面） 加了 perspective 和没有加是什么区别， 第一个小方块，是有加的效果，能明显的看到空间感了有没有，感觉他是真的像在旋转， 而第二个呢，像是在伸缩。...你没有设置，也就是默认看父元素中间的地方 3 练习作业 使用 2D 位移实现上下左右居中。 使用 2D 缩放实现 hover 放大效果。 使用 2D 旋转实现扑克牌效果。...你没有设置，也就是默认看父元素中间的地方 3 练习作业 使用 2D 位移实现上下左右居中。 使用 2D 缩放实现 hover 放大效果。 使用 2D 旋转实现扑克牌效果。

    2700

    【CSS3进阶】酷炫的3D旋转透视

    当我们指定一个容器的 transform-style 的属性值为 preserve-3d 时，容器的后代元素便会具有 3D 效果，这样说有点抽象，也就是当前父容器设置了 preserve-3d 值后，它的子元素就可以相对于父元素所在的平面...嗯，这个时候，6 个 div 面仍然是重叠在一起的。...为了更有立体感，我们可以调整父容器的旋转角度，旋转看上去更立体的角度: ? 至此，一个 3D 立方体就完成了。...注意沿着三条边的中心点旋转 70.5 度这句话，意思是每个图形要定位一次旋转中心，也就是 transform-origin 属性，它允许我们设置旋转元素的基点位置。...简单来说，当元素没有设置 perspective 时，也就是当 perspective:none/0 时所有后代元素被压缩在同一个二维平面上，不存在景深的效果。

    2.1K40

    【CSS3】CSS3 3D 转换示例 - 3D 旋转木马 ( @keyframes 规则 定义动画 | 为 盒子模型 应用动画 | 开启透视视图 | 设置 3D 呈现样式 )

    语意元素 , 表示一组独立的内容 , 这些内容 逻辑上 属于 同一个部分 或 章节 ; 使用 标签可以帮助 组织 和 划分 页面内容 , 提高文档的可读性和可维护性 , 有助于 搜索引擎...即 子盒子模型 的 3D 效果 是 相对于它们自己的 3D 空间 , 而不是相对于父元素的平面 ; 鼠标移动到控件上方效果 :hover 是一个 伪类选择器 , 该选择器 表示 用户与页面进行交互的一种状态..., 即 鼠标指针停留在 盒子模型 上方时的一种状态 ; section:hover { /* 鼠标 移动到 section 盒子模型上方 , 旋转动画停止 */...盒子模型上方时 , 会显示 .box:hover 样式 ; 该示例中 , 鼠标 移动到 section 盒子模型上方 , 旋转动画停止 ; 设置 6 个子盒子模型的效果 父容器中设置 相对定位 , 根据...子绝父相 原则 , 子盒子使用了绝对定位 , 父盒子就要使用相对定位 ; 修改下 section 的属性 , 为其设置 transform: rotateX(-20deg); 属性 , 将其绕 X 轴旋转

    58010

    CSS3 3D转换

    2>模拟人类的视觉位置，可认为安排一只眼睛去看 　　3>透视我们也称为视距：视距就是人的眼睛到屏幕的距离 　　4>距离视觉点越近的在电脑平面成像越大，越远成像越小 　　5>透视的单位是像素 透视写在被观察元素的父盒子上面的...有了透视，就能看到translateZ 引起的变化了 　 1>translateZ：近大远小 　　2>translateZ：往外是正值 　　3>translateZ：往里是负值 1.5 3D旋转...rotate3d 　　3D旋转指可以让元素在三维平面内沿着 x轴，y轴，z轴或者自定义轴进行旋转。...　　左手的手拇指指向 x轴的正方向 　　其余手指的弯曲方向就是该元素沿着x轴旋转的方向 判断Y轴正负值 　 左手的手拇指指向 y轴的正方向 　 其余手指的弯曲方向就是该元素沿着y轴旋转的方向（正值）...transform-style: flat 子元素不开启3d立体空间 默认的 　　transform-style: preserve-3d; 子元素开启立体空间 　　代码写给父级，但是影响的是子盒子

    38220

    前端学习(18)~css3属性学习(十一)：动画详解

    2D 转换 转换是 CSS3 中具有颠覆性的一个特征，可以实现元素的位移、旋转、变形、缩放，甚至支持矩阵方式。 转换再配合过渡和动画，可以取代大量早期只能靠 Flash 才可以实现的效果。...上方代码中，我们最好加个透视的属性，方能看到3D的效果；没有这个属性的话，图片旋转的时候，像是压瘪了一样。 而且，透视的是要加给图片的父元素 div，方能生效。我们在后面会讲解透视属性。...格式有两种写法： 作为一个属性，设置给父元素，作用于所有3D转换的子元素 作为 transform 属性的一个值，做用于元素自身。...格式举例： perspective: 500px; 4、3D呈现（transform-style） 3D元素构建是指某个图形是由多个元素构成的，可以给这些元素的父元素设置transform-style:...（子盒子被扁平化） */ **案例：**立方体 <!

    2.2K30

    CSS 3D的魅力

    先写一个面.cube1，宽高100%等同于父元素的宽高，背景色为red，代码和效果如下 .cube1{ width: 100%; height: 100%; background...为了之后方便我们看到立体效果，现在我们旋转一下父元素，加入如下代码，效果如下 .cube-box{ transform: rotateX(-30deg) rotateY(45deg); } ?...根据后端数据动态设置父元素.cube-box的宽高，子元素全部自适应就行，这样才更好用。...我们把每一个面都定义为红色，调整一下每一个面的颜色值，这样看起来就有视角的效果 ? 14....现在长方体已经写好，我们来点动效吧，添加一个div.cube-wapper把刚才的cube-box再包裹一层，让cube-box绝对定位到父元素底部，这样高度变化的时候是向上延伸和收缩，js定时器每隔5

    75140

    CSS3d转换

    ，当人的眼睛离屏幕越近时他看到的物体越大，相反他看到的物体越小，这个人眼睛到屏幕的距离就称之为视距。...而z就是css中的translateZ也就是z轴物体离屏幕的距离，这个值越大看到的物体越大，值小看到的物体越小 了解上面的透视和translateZ之后我们就可以给我们的案例加上透视效果了 不过需要注意的是透视是写在被观察元素的父盒子上面的...，说白了就是当子元素要实现3d效果那么应该在父元素上设置相应的透视 的距离 如果我们body有三个元素，并且在视距相同的情况下，此时元素大小是相同的，如果我们设置每个元素不同的translateZ,这样我们看到的每个元素就会不同...，但基于这个特性我们可以实现很多有趣的东西如3d相册就是利用了这一特性 3d旋转 指可以让元素在三维平面内沿着x轴，y轴，z轴或者自定义轴进行旋转 transform:rotateX() rotateY

    45610

    「HTML&CSS」第三部分

    2D 平面上) 实际上模仿人类的视觉位置，可视为安排一直眼睛去看 透视也称为视距，所谓的视距就是人的眼睛到屏幕的距离 距离视觉点越近的在电脑平面成像越大，越远成像越小 透视的单位是像素 知识要点 透视需要写在被视察元素的父盒子上面...注意下方图片 d：就是视距，视距就是指人的眼睛到屏幕的距离 z：就是 z 轴，z 轴越大(正值)，我们看到的物体就越大 四、 translateZ translateZ 与 perspecitve...的区别：perspecitve 给父级进行设置，translateZ 给 子元素进行设置不同的大小 五、3D旋转rotateX 3D 旋转指可以让元素在三维平面内沿着 x 轴、y 轴、z 轴 或者自定义轴进行旋转...y 轴的正方向 其余的手指弯曲方向就是该元素沿着 y 轴旋转的方向(正值) 七、 3D旋转 rotateZ 代码演示 div { perspective: 500px; } img {...transform-style: flat 代表子元素不开启 3D立体空间，默认的 transform-style: preserve-3d 子元素开启立体空间 代码写给父级，但是影响的是子盒子 -

    23430

    【CSS3】CSS3 3D 转换 ③ ( 3D 透视视图 | translateZ 转换分析 | 网页调试工具调试 translateZ 属性值 | 代码示例 )

    translateZ 属性值 在网页中 , 修改标签元素的 transform: translateZ 属性值 , Z 轴平移值为 0 时 , 显示的样式如下 , 标签元素显示的大小就是其本身大小 ;...Z 轴平移值为 -200 px 时 , 显示的样式如下 , 标签元素会变小 ; 近大远小 , 这里变远了 ; Z 轴平移值为 200 px 时 , 显示的样式如下 , 标签元素会变大 ;...的 父容器 上 视距越小 成像越大 如果想要网页中的元素看起来大一些 可以减小视距 */ perspective...像素 ; 2、代码示例 - translateZ 为 200 示例 在下面的代码中 , 设置了 500 像素的 视距 ; 设置元素的 3D 转换属性为 : /* 设置 3D 转换...的 父容器 上 视距越小 成像越大 如果想要网页中的元素看起来大一些 可以减小视距 */ perspective

    36630

    玩转 CSS3 3D 变换：打造炫酷立体网页效果

    需要注意的是，如果同时在父元素和子元素中设置 perspective，可能会产生冲突。...因此，建议只在父元素中设置 perspective 属性，通常的推荐数值范围在 900px 到 1200px 之间。 当视线距离物体足够远时，基本上不会产生明显的近大远小效果。...通过设置 perspective-origin 属性，我们可以调整观察者的角度。当使用绝对定位样式移动元素时，坐标系的 X 轴和 Y 轴会以设置了相对定位的祖先元素的中点为原点。...3 旋转 在3D空间中，使用 rotateX、rotateY、rotateZ 方法可以围绕相应的轴线以给定的度数进行顺时针旋转。负值同样适用，此时元素将逆时针旋转。...通过使用这些3D缩放函数，可以让元素在 Z 轴上按比例进行缩放。默认缩放比例为 1，当值大于 1 时，元素放大；当值小于 1 且大于 0.01 时，元素缩小。

    13910
    点击加载更多

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

      领券