css background 旋转_CSS动画之transform

最新推荐文章于 2023-07-12 00:24:52 发布

懂车天天答

最新推荐文章于 2023-07-12 00:24:52 发布

阅读量1.4k

点赞数

文章标签： css background 旋转

本文链接：https://blog.csdn.net/weixin_31902781/article/details/112078854

版权

CSS 的transform属性用来给元素添加一些变形效果，主要包括改变元素的位置或形状，同时不影响页面的布局。使用transform我们可以实现一些非常炫酷的效果，比如纯CSS实现的钟表、立方体的旋转等，以提升用户体验。

平移translate

使用平移translate可以改变元素的位置。可选值有：

translateX()：元素沿着 x 轴方向平移；translateY()：元素沿着 y 轴方向平移；translateZ()：元素沿着 z 轴方向平移；
其中，平移的单位可以是像素值 px 或百分比。需要注意的是如果设置百分比的话，元素的平移量是相对于元素自身尺寸进行的。

应用：使用平移效果可以实现在元素尺寸由内容撑开时元素的水平、垂直居中效果。语法：

沿着 x 轴方向平移transform:translateX(平移量)；
沿着 y 轴方向平移transform:translateY(平移量)；
沿着 z 轴方向平移transform:translateZ(平移量)；

实例1：元素沿着 x 轴从父元素的左侧平移到右侧。
效果为：

平移实例效果图
参考代码为：

<html><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>平移Translate实例title>    <style>        .box{
                width: 600px;            height: 320px;            margin: 50px auto;            border: 5px #333 solid;        }        .box1{
                width: 200px;            height: 200px;            background: #bfa;            transition: .5s;        }        .box:hover .box1{
                transform: translateX(400px);        }style>head><body>    <div class="box">        <div class="box1">div>    div>body>html>

旋转rotate

使用旋转rotate可以改变元素的位置，可以调整元素的显示角度，以实现 3D 效果。可选值有：

rotateX()：元素沿着 x 轴方向旋转；rotateY()：元素沿着 y 轴方向旋转；rotateZ()：元素沿着 z 轴方向旋转；
其中，旋转的单位可以是度 deg 或圈数 (turn)。当

最低0.47元/天解锁文章

懂车天天答

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css background 旋转_CSS动画之transform

CSS 的transform属性用来给元素添加一些变形效果，主要包括改变元素的位置或形状，同时不影响页面的布局。使用transform我们可以实现一些非常炫酷的效果，比如纯CSS实现的钟表、立方体的旋转等，以提升用户体验。平移translate使用平移translate可以改变元素的位置。可选值有：translateX()：元素沿着 x 轴方向平移；translateY()：元素沿着 y...
复制链接

扫一扫