搜索
首页web前端css教程CSS3如何实现2D转换?2D转换的实现(代码示例)

本篇文章给大家带来的内容是介绍CSS3如何实现2D转换?2D转换的实现(代码示例)。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。

transform

参考W3手册

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

  • 1、格式:

transform: none|transform-functions;
  • 1、常用取值:

    • 1)、旋转 rotate

    transform: rotate(45deg);/*其中deg是单位, 代表多少度*/
    • 2)、平移 translate

    transform: translate(100px, 0px);  /*第一个参数:水平方向第二个参数:垂直方向*/
    • 3)、缩放 scale

    transform: scale(1.5);
    /*transform: scale(0.5, 0.5);*/
    
    /*
    第一个参数:水平方向
    第二个参数:垂直方向
    注意点:
    如果取值是1, 代表不变
    如果取值大于1, 代表需要放大
    如果取值小于1, 代表需要缩小
    如果水平和垂直缩放都一样, 那么可以简写为一个参数
    */
    • 4)、综合转换连写格式

    transform: rotate(45deg) translate(100px, 0px) scale(1.5, 1.5);
    /*
    注意点:
    1.如果需要进行多个转换, 那么用空格隔开
    2.2D的转换模块会修改元素的坐标系, 所以旋转之后再平移就不是水平平移的
    */

默认情况下所有元素都是围绕Z轴进行旋转,如果想围绕哪个轴旋转,那么只需要在rotate后面加上哪个轴即可。如:

transform: rotateZ(45deg);

transform: rotateX(45deg);

transform: rotateY(45deg);

transform-origin

transform-origin 属性用于改变被转换元素的位置

2D转换元素能够改变元素的X和Y轴。3D转换元素还能改变其Z轴

  • 1、格式:

transform-origin: left top;
  • 2、取值:

/*具体像素*/
transform-origin: 200px 0px;
/*百分比*/
transform-origin: 50% 50%;
/*特殊关键字*/
transform-origin: left top;

默认情况下所有的元素都是以自己的中心点作为参考来旋转的, 我们可以通过形变中心点属性来修改它的参考点

perspective

perspective 属性定义3D元素距视图的距离,以像素计,该属性允许改变3D元素查看3D元素的视图

当为元素定义perspective属性时,其子元素会获得透视效果,而不是元素本身

  • 格式:

perspective: number|none;
/*
number  元素距离视图的距离,以像素计
none    默认值。与0相同。不设置透视
*/
  • 注意:perspective 属性只能影响3D转换元素

综合实例一

2D模块转换扑克练习

76c82f278ac045591c9159d381de2c57ee6f7fadafad2ae7f411683c59a92b2093f0f5c25f18dab9d176bd4f6de5d30e
    a80eb7cbb6fff8b0ff70bae37074b813
    b2386ffb911b14667cb8f0f91ea547a72D模块转换扑克练习6e916e0f7d1e588d4f442bf645aedb2f
    c9ccee2e6ea535a969eb3f532ad9fe89
        *{
            margin: 0;
            padding: 0;
        }
        p{
            width: 310px;
            height: 418px;
            border: 1px solid gold;
            margin: 100px auto;
            background-color: #afcced;
            perspective: 400px;
        }
        p img{
            transition: transform 1.2s;
            transform-origin: center bottom;
        }
        p:hover img{
            transform: rotateX(80deg);
        }
    531ac245ce3e4fe3d50054a55f2659279c3bca370b5104690d9ef395f2c5f8d16c04bd5ca3fcae76e30b72ad730ca86de388a4556c0f65e1904146cc1a846bee
    f08f3e4a6743d92c58d098522cd24d8b94b3e26ee717c64999d7867364b1b4a336cc49f0c466276486e50c850b7e495673a6ac4ed44ffec12cee46588e518a5e

综合实例二(相片墙)

2D转换模块-照片墙

76c82f278ac045591c9159d381de2c57ee6f7fadafad2ae7f411683c59a92b2093f0f5c25f18dab9d176bd4f6de5d30e
    a80eb7cbb6fff8b0ff70bae37074b813
    b2386ffb911b14667cb8f0f91ea547a72D转换模块-照片墙6e916e0f7d1e588d4f442bf645aedb2f
    c9ccee2e6ea535a969eb3f532ad9fe89
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            height: 400px;
            margin: 100px auto;
            background-color: cornflowerblue;
            text-align: center;
            border: 1px solid #000;
        }
        ul li{
            list-style: none;
            margin-top: 100px;
            height: 200px;
            width: 150px;
            display: inline-block;
            background-color: red;
            border: 5px solid white;
            transition: transform 1s;
            box-shadow: 2px 2px 2px;
            position: relative;
        }
        ul li:nth-child(1){
            transform: rotate(30deg);
        }
        ul li:nth-child(2){
            transform: rotate(-40deg);
        }
        ul li:nth-child(3){
            transform: rotate(15deg);
        }
        ul li:nth-child(4){
            transform: rotate(60deg);
        }
        ul li:nth-child(5){
            transform: rotate(-25deg);
        }
        ul li:nth-child(6){
            transform: rotate(10deg);
        }
        ul li img{
            width: 150px;
            height: 200px;
        }
        ul li:hover {
            transform: scale(1.6);
            z-index: 999;
        }
    531ac245ce3e4fe3d50054a55f2659279c3bca370b5104690d9ef395f2c5f8d16c04bd5ca3fcae76e30b72ad730ca86dff6d136ddc5fdfeffaf53ff6ee95f185
    25edfb22a4f469ecb59f1190150159c6f49c0cc05e00cb9266570db8ee6e13e8bed06894275b65c1ab86501b08a632eb
    25edfb22a4f469ecb59f1190150159c6e561a964df9710ea8a965618667261a8bed06894275b65c1ab86501b08a632eb
    25edfb22a4f469ecb59f1190150159c6d5ba7c568f86a0e703cb537a797a0f52bed06894275b65c1ab86501b08a632eb
    25edfb22a4f469ecb59f1190150159c64099d3f8819978d35f73419e54584886bed06894275b65c1ab86501b08a632eb
    25edfb22a4f469ecb59f1190150159c6840e3b566a617b70376ff0f12fc5c8c2bed06894275b65c1ab86501b08a632eb
    25edfb22a4f469ecb59f1190150159c693586cb1e13dee7994ad84646904e02dbed06894275b65c1ab86501b08a632eb929d1f5ca49e04fdcb27f9465b94468936cc49f0c466276486e50c850b7e495673a6ac4ed44ffec12cee46588e518a5e

以上是CSS3如何实现2D转换?2D转换的实现(代码示例)的详细内容。更多信息请关注PHP中文网其他相关文章!

声明
本文转载于:博客园。如有侵权,请联系admin@php.cn删除
控制台命令指南控制台命令指南Apr 11, 2025 am 10:14 AM

多年来,开发人员的调试控制台已在Web浏览器中以一种或另一种形式提供。最初是作为错误报告的手段

被盗域名的情况被盗域名的情况Apr 11, 2025 am 10:12 AM

早在2011年,该网站的域名CSS-Tricks.com就被盗了。 “劫持域,”他们称之为。它不仅是这个网站,但大约有12个网站

使用边缘到边缘网格的全宽元素使用边缘到边缘网格的全宽元素Apr 11, 2025 am 10:09 AM

如果您有一个有限的宽度容器,则说一个集中的文本列,“打破”以使全宽元素涉及欺骗。也许是最好的

创建一个详细信息,但从未关闭创建一个详细信息,但从未关闭Apr 11, 2025 am 10:02 AM

HTML中的元素和元素可用于使内容切换到文本部分。默认情况下,您会看到

使用Google电子表格和tabletop.js创建一个可编辑的网页使用Google电子表格和tabletop.js创建一个可编辑的网页Apr 11, 2025 am 10:01 AM

如果您曾经面临过客户的永无止境的内容修订请求,请举手。并不是说变化本身很困难,而是

创新无法保持网络快速创新无法保持网络快速Apr 11, 2025 am 09:59 AM

创新的果实每隔一段时间都以改进网络的基础层的形式产生果实。 2015年,HTTP/2成为已出版的

Guillermo' 2019年审查Guillermo' 2019年审查Apr 11, 2025 am 09:52 AM

在我读过的所有以技术为重点的评论帖子中,Guillermo Rauch是我的最爱。那里有很多

React路由器的钩子React路由器的钩子Apr 11, 2025 am 09:49 AM

React路由器5包含钩子的力量,并引入了四个不同的钩子来帮助路由。如果您正在寻找,您会发现这篇文章有用

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
3 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
3 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
3 周前By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解锁Myrise中的所有内容
3 周前By尊渡假赌尊渡假赌尊渡假赌

热工具

Dreamweaver Mac版

Dreamweaver Mac版

视觉化网页开发工具

EditPlus 中文破解版

EditPlus 中文破解版

体积小,语法高亮,不支持代码提示功能

WebStorm Mac版

WebStorm Mac版

好用的JavaScript开发工具

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

适用于 Eclipse 的 SAP NetWeaver 服务器适配器

将Eclipse与SAP NetWeaver应用服务器集成。

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)