广告

扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > VUE >css中如何使用transform属性
  • 150

0
分享到

css中如何使用transform属性

2024-04-02 19:04:59 150人浏览 独家记忆
摘要

这篇文章主要介绍了CSS中如何使用transfORM属性，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。 　　css3transform属性

这篇文章主要介绍了CSS中如何使用transfORM属性，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

　　css3transform属性

　　作用：transform属性向元素应用2D或3D转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

　　语法：

　　transform:none|transform-functions;

　　可有属性值说明：

　　none：定义不进行转换。

　　matrix(n,n,n,n,n,n)：定义2D转换，使用六个值的矩阵。

　　matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)定义3D转换，使用16个值的4x4矩阵。

　　translate(x,y)：定义2D转换。

　　translate3d(x,y,z)：定义3D转换。

　　translateX(x)：定义转换，只是用X轴的值。

　　translateY(y)：定义转换，只是用Y轴的值。

　　translateZ(z)：定义3D转换，只是用Z轴的值。

　　scale(x,y)：定义2D缩放转换。

　　scale3d(x,y,z)：定义3D缩放转换。

　　scaleX(x)：通过设置X轴的值来定义缩放转换。

　　scaleY(y)：通过设置Y轴的值来定义缩放转换。

　　scaleZ(z)：通过设置Z轴的值来定义3D缩放转换。

　　rotate(angle)：定义2D旋转，在参数中规定角度。

　　rotate3d(x,y,z,angle)：定义3D旋转。

　　rotateX(angle)：定义沿着X轴的3D旋转。

　　rotateY(angle)：定义沿着Y轴的3D旋转。

　　rotateZ(angle)：定义沿着Z轴的3D旋转。

　　skew(x-angle,y-angle)：定义沿着X和Y轴的2D倾斜转换。

　　skewX(angle)：定义沿着X轴的2D倾斜转换。

　　skewY(angle)：定义沿着Y轴的2D倾斜转换。

　　perspective(n)：为3D转换元素定义透视视图。

　　注：InternetExplorer10、Firefox、Opera支持transform属性。InternetExplorer9支持替代的-ms-transform属性（仅适用于2D转换）。Safari和Chrome支持替代的-WEBkit-transform属性（3D和2D转换）。Opera只支持2D转换。

　　CSS3transform属性的使用示例

　　<!DOCTYPEhtml>

　　<html>

　　<head>

　　<style>

　　*,*:after,*:before{

　　box-sizing:border-box;

　　}

　　body{

　　background:#F5F3F4;

　　margin:0;

　　padding:10px;

　　font-family:'OpenSans',sans-serif;

　　text-align:center;

　　}

　　h3,h5{

　　font-weight:400;

　　color:#4d4d4d;

　　}

　　.card{

　　display:inline-block;

　　margin:10px;

　　background:#fff;

　　padding:10px;

　　min-width:180px;

　　box-shadow:03px5px#DDD;

　　color:#555;

　　}

　　.card.box{

　　width:60px;

　　height:60px;

　　margin:auto;

　　background:#ddd;

　　cursor:pointer;

　　box-shadow:005px#cccinset;

　　}

　　.card.box.fill{

　　width:60px;

　　height:60px;

　　position:relative;

　　background:#03A9F4;

　　opacity:.5;

　　box-shadow:005px#ccc;

　　-webkit-transition:0.3s;

　　transition:0.3s;

　　}

　　.cardp{

　　margin:25px00;

　　}

　　.rotate:hover.fill{

　　-webkit-transform:rotate(45deg);

　　transform:rotate(45deg);

　　}

　　.rotateX:hover.fill{

　　-webkit-transform:rotateX(45deg);

　　transform:rotateX(45deg);

　　}

　　.rotateY:hover.fill{

　　-webkit-transform:rotateY(45deg);

　　transform:rotateY(45deg);

　　}

　　.rotateZ:hover.fill{

　　-webkit-transform:rotate(45deg);

　　transform:rotate(45deg);

　　}

　　.scale:hover.fill{

　　-webkit-transform:scale(2,2);

　　transform:scale(2,2);

　　}

　　.scaleX:hover.fill{

　　-webkit-transform:scaleX(2);

　　transform:scaleX(2);

　　}

　　.scaleY:hover.fill{

　　-webkit-transform:scaleY(2);

　　transform:scaleY(2);

　　}

　　.skew:hover.fill{

　　-webkit-transform:skew(45deg,45deg);

　　transform:skew(45deg,45deg);

　　}

　　.skewX:hover.fill{

　　-webkit-transform:skewX(45deg);

　　transform:skewX(45deg);

　　}

　　.skewY:hover.fill{

　　-webkit-transform:skewY(45deg);

　　transform:skewY(45deg);

　　}

　　.translate:hover.fill{

　　-webkit-transform:translate(45px,1em);

　　transform:translate(45px,1em);

　　}

　　.translateX:hover.fill{

　　-webkit-transform:translateX(45px);

　　transform:translateX(45px);

　　}

　　.translateY:hover.fill{

　　-webkit-transform:translateY(45px);

　　transform:translateY(45px);

　　}

　　.matrix:hover.fill{

　　-webkit-transform:matrix(2,2,0,2,45,0);

　　transform:matrix(2,2,0,2,45,0);

　　}

　　</style>

　　</head>

　　<body>

　　<!--Rotate-->

　　<divclass="card">

　　<divclass="boxrotate">

　　<divclass="fill"></div>

　　</div>

　　<p>rotate(45deg)</p>

　　</div>

　　<divclass="card">

　　<divclass="boxrotateX">

　　<divclass="fill"></div>

　　</div>

　　<p>rotateX(45deg)</p>

　　</div>

　　<divclass="card">

　　<divclass="boxrotateY">

　　<divclass="fill"></div>

　　</div>

　　<p>rotateY(45deg)</p>

　　</div>

　　<divclass="card">

　　<divclass="boxrotateZ">

　　<divclass="fill"></div>

　　</div>

　　<p>rotateZ(45deg)</p>

　　</div>

　　<!--scale-->

　　<divclass="card">

　　<divclass="boxscale">

　　<divclass="fill"></div>

　　</div>

　　<p>scale(2)</p>

　　</div>

　　<divclass="card">

　　<divclass="boxscaleX">

　　<divclass="fill"></div>

　　</div>

　　<p>scaleX(2)</p>

　　</div>

　　<divclass="card">

　　<divclass="boxscaleY">

　　<divclass="fill"></div>

　　</div>

　　<p>scaleY(2)</p>

　　</div>

　　<!--skew-->

　　<divclass="card">

　　<divclass="boxskew">

　　<divclass="fill"></div>

　　</div>

　　<p>skew(45deg,45deg)</p>

　　</div>

　　<divclass="card">

　　<divclass="boxskewX">

　　<divclass="fill"></div>

　　</div>

　　<p>skewX(45deg)</p>

　　</div>

　　<divclass="card">

　　<divclass="boxskewY">

　　<divclass="fill"></div>

　　</div>

　　<p>skewY(45deg)</p>

　　</div>

　　<!--translate-->

　　<divclass="card">

　　<divclass="boxtranslate">

　　<divclass="fill"></div>

　　</div>

　　<p>translate(45px)</p>

　　</div>

　　<divclass="card">

　　<divclass="boxtranslateX">

　　<divclass="fill"></div>

　　</div>

　　<p>translateX(45px)</p>

　　</div>

　　<divclass="card">

　　<divclass="boxtranslateY">

　　<divclass="fill"></div>

　　</div>

　　<p>translateY(45px)</p>

　　</div>

　　<divclass="card">

　　<divclass="boxmatrix">

　　<divclass="fill"></div>

　　</div>

　　<p>matrix(2,2,0,2,45,0)</p>

　　</div>

　　</body>

　　</html>

css中如何使用transform属性

感谢你能够认真阅读完这篇文章，希望小编分享的“css中如何使用transform属性”这篇文章对大家有帮助，同时也希望大家多多支持编程网，关注编程网VUE频道，更多相关知识等着你来学习!

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: css中如何使用transform属性

本文链接: https://www.lsjlt.com/news/90010.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档
去做题
猜你喜欢
  • css中如何使用transform属性
    这篇文章主要介绍了css中如何使用transform属性，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。 　　CSS3transform属性...
    99+
    2022-10-19
  • CSS如何使用transform属性
    小编给大家分享一下CSS如何使用transform属性，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！ 您可以使用CSStran...
    99+
    2022-10-19
  • css中怎么用transform属性
    这篇文章主要介绍css中怎么用transform属性，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！ 　　旋转rotate 　　用法： 　　transform:rotate(45...
    99+
    2022-10-19
  • css中的transform-origin属性怎么用
    小编给大家分享一下css中的transform-origin属性怎么用，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！ 　　CS...
    99+
    2022-10-19
  • css中的transform-style属性怎么用
    这篇文章将为大家详细讲解有关css中的transform-style属性怎么用，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。 　　CSS3transform-style...
    99+
    2022-10-19
  • css中的text-transform属性有什么用
    小编给大家分享一下css中的text-transform属性有什么用，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！ text-...
    99+
    2022-10-19
  • css如何利用transform的属性实现盒子居中
    这篇文章主要介绍css如何利用transform的属性实现盒子居中，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！利用transform的属性（缺点：需要支持Html5）<style type=&quo...
    99+
    2023-06-17
  • CSS 中transform-origin属性的作用是什么
    CSS 中transform-origin属性的作用是什么？相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。transform-origin作用这个属性是用来改变元素变形的原点，一...
    99+
    2023-06-08
  • css3中transform属性如何实现
    这篇文章主要介绍css3中transform属性如何实现，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！ 　　1transform属性 　　在CSS3中，可以利用transform...
    99+
    2022-10-19
  • CSS3中transform属性怎么用
    这篇文章主要介绍了CSS3中transform属性怎么用，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。语法：none|<transfo...
    99+
    2022-10-19
  • css3如何使用transform属性来变换背景图
    这篇文章将为大家详细讲解有关css3如何使用transform属性来变换背景图，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。 　　使用 css3 transform 属...
    99+
    2022-10-19
  • css中margin属性如何使用
    css中margin属性的使用方法：在css中可使用“margin”属性来设置两个元素之间的外边距，只需要css中添加“margin:10px 5px 15px 20px;”样式代码即可，此代码意思为：上外边距是10px、右外边距是5px、...
    99+
    2022-10-05
  • CSS中position属性如何使用
    本篇文章为大家展示了CSS中position属性如何使用，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。如何正确的使用CSS:position属性它的作用是什么？Po...
    99+
    2022-10-19
  • CSS中padding 属性如何使用
    本篇文章给大家分享的是有关CSS中padding 属性如何使用，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。CSS padding 属性定义和...
    99+
    2022-10-19
  • CSS中clip属性如何使用
    这篇文章将为大家详细讲解有关 CSS中clip属性如何使用，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。CSS clip 属性定义和用法clip 属性剪裁绝...
    99+
    2022-10-19
  • CSS中display属性如何使用
    这篇文章将为大家详细讲解有关CSS中display属性如何使用，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。CSS display 属性定义和用法displ...
    99+
    2022-10-19
  • CSS中 top属性如何使用
    CSS中 top属性如何使用，相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。CSS top 属性定义和用法top 属性规定元素的顶部边缘。该属性...
    99+
    2022-10-19
  • CSS中expression属性如何使用
    CSS中expression属性如何使用，针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。CSS expression属性作用1、给元素固有属...
    99+
    2022-10-19
  • CSS中如何使用clear属性
    CSS中如何使用clear属性，相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。CSS clear属性定义和用法clear 属性规定元素的哪一侧不...
    99+
    2022-10-19
  • CSS中display:table属性如何使用
    本篇文章给大家分享的是有关CSS中display:table属性如何使用，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。CSS display:...
    99+
    2022-10-19
软考高级职称资格查询
软考职称历年真题下载
软考职称资料下载
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作