精华内容
下载资源
问答
  • css3 transform旋转属性鼠标悬停3D立体图片旋转显示 css3 transform旋转属性鼠标悬停3D立体图片旋转显示
  • css transform旋转属性

    2019-04-25 16:01:00
    将以下代码复制到本地就可以看到效果: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>transform属性<...style type="text/css...

    将以下代码复制到本地就可以看到效果:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>transform属性</title>
    </head>
    <style type="text/css">
         .oneX{
            border: 2px crimson solid;
            background-color: chartreuse;
            width: 100px;
            height: 100px;
             transform: rotateX(0deg);
             -moz-transform: rotateX(0deg);
             -webkit-transform: rotateX(0deg);
             -ms-transform: rotateX(0deg);
        }
         .oneY{
             border: 2px crimson dashed;
             background-color: chartreuse;
             width: 100px;
             height: 100px;
             transform: rotateY(0deg);
             -moz-transform: rotateY(0deg);
             -webkit-transform: rotateY(0deg);
             -ms-transform: rotateY(0deg);
    
         }
         .one{
             border: 2px crimson dashed;
             background-color: chartreuse;
             width: 100px;
             height: 100px;
         }
         .oneO{
             border: 2px crimson dashed;
             background-color: chartreuse;
             width: 100px;
             height: 100px;
             margin: 150px;
             transform-origin: 0 0;
             -webkit-transform-origin: 0 0;
             -ms-transform-origin: 0 0;
             -moz-transform-origin: 0 0;
             -webkit-transform-style: preserve-3d;
         }
         .one3D{
             border: 2px crimson dashed;
             background-color: chartreuse;
             width: 100px;
             height: 100px;
             margin: 150px;
             transform-origin: 50% 50% 75px;
             -webkit-transform-origin: 50% 50% 75px;
             -ms-transform-origin:  50% 50% 75px;
             -moz-transform-origin:  50% 50% 75px;
             -webkit-transform-style: preserve-3d;
             transform-style: preserve-3d;
             -moz-transform-style: preserve-3d;
             -ms-transform-style: preserve-3d;
             box-shadow: 10px 10px 5px #888888;
         }
         .one2D{
             border: 2px crimson dashed;
             background-color: chartreuse;
             width: 100px;
             height: 100px;
             margin: 150px;
             transform-origin: 50% 50% 75px;
             -webkit-transform-origin: 50% 50% 75px;
             -ms-transform-origin:  50% 50% 75px;
             -moz-transform-origin:  50% 50% 75px;
             -webkit-transform-style: flat;
             transform-style: flat;
             -moz-transform-style: flat;
             -ms-transform-style: flat;
             box-shadow: 10px 10px 5px #888888;
         }
    </style>
    <body>
    <p>只有在transform属性存在情况下transform-style和transform-origin才会有效果。</p>
    <p>transform属性介绍:</p>
    <table>
    
        <tbody><tr>
            <th style="width:25%">值</th>
            <th>描述</th>
    
        </tr>
    
        <tr>
            <td>none</td>
            <td>定义不进行转换。</td>
    
        </tr>
    
        <tr>
            <td>matrix(<i>n</i>,<i>n</i>,<i>n</i>,<i>n</i>,<i>n</i>,<i>n</i>)</td>
            <td>定义 2D 转换,使用六个值的矩阵。</td>
    
        </tr>
    
        <tr>
            <td>matrix3d(<i>n</i>,<i>n</i>,<i>n</i>,<i>n</i>,<i>n</i>,<i>n</i>,<i>n</i>,<i>n</i>,<i>n</i>,<i>n</i>,<i>n</i>,<i>n</i>,<i>n</i>,<i>n</i>,<i>n</i>,<i>n</i>)</td>
            <td>定义 3D 转换,使用 16 个值的 4x4 矩阵。</td>
    
        </tr>
    
        <tr>
            <td>translate(<i>x</i>,<i>y</i>)</td>
            <td>定义 2D 转换。</td>
    
        </tr>
    
        <tr>
            <td>translate3d(<i>x</i>,<i>y</i>,<i>z</i>)</td>
            <td>定义 3D 转换。</td>
    
        </tr>
    
        <tr>
            <td>translateX(<i>x</i>)</td>
            <td>定义转换,只是用 X 轴的值。</td>
    
        </tr>
    
        <tr>
            <td>translateY(<i>y</i>)</td>
            <td>定义转换,只是用 Y 轴的值。</td>
    
        </tr>
    
        <tr>
            <td>translateZ(<i>z</i>)</td>
            <td>定义 3D 转换,只是用 Z 轴的值。</td>
    
        </tr>
    
        <tr>
            <td>scale(<i>x</i>[,<i>y</i>]?) </td>
            <td>定义 2D 缩放转换。</td>
    
        </tr>
    
        <tr>
            <td>scale3d(<i>x</i>,<i>y</i>,<i>z</i>)</td>
            <td>定义 3D 缩放转换。</td>
    
        </tr>
    
        <tr>
            <td>scaleX(<i>x</i>)</td>
            <td>通过设置 X 轴的值来定义缩放转换。</td>
    
        </tr>
    
        <tr>
            <td>scaleY(<i>y</i>)</td>
            <td>通过设置 Y 轴的值来定义缩放转换。</td>
    
        </tr>
    
        <tr>
            <td>scaleZ(<i>z</i>)</td>
            <td>通过设置 Z 轴的值来定义 3D 缩放转换。</td>
    
        </tr>
    
        <tr>
            <td>rotate(<i>angle</i>)</td>
            <td>定义 2D 旋转,在参数中规定角度。</td>
    
        </tr>
    
        <tr>
            <td>rotate3d(<i>x</i>,<i>y</i>,<i>z</i>,<i>angle</i>)</td>
            <td>定义 3D 旋转。</td>
    
        </tr>
    
        <tr>
            <td>rotateX(<i>angle</i>)</td>
            <td>定义沿着 X 轴的 3D 旋转。</td>
    
        </tr>
    
        <tr>
            <td>rotateY(<i>angle</i>)</td>
            <td>定义沿着 Y 轴的 3D 旋转。</td>
    
        </tr>
    
        <tr>
            <td>rotateZ(<i>angle</i>)</td>
            <td>定义沿着 Z 轴的 3D 旋转。</td>
    
        </tr>
    
        <tr>
            <td>skew(<i>x-angle</i>,<i>y-angle</i>)</td>
            <td>定义沿着 X 和 Y 轴的 2D 倾斜转换。</td>
    
        </tr>
    
        <tr>
            <td>skewX(<i>angle</i>)</td>
            <td>定义沿着 X 轴的 2D 倾斜转换。</td>
    
        </tr>
    
        <tr>
            <td>skewY(<i>angle</i>)</td>
            <td>定义沿着 Y 轴的 2D 倾斜转换。</td>
    
        </tr>
    
        <tr>
            <td>perspective(<i>n</i>)</td>
            <td>为 3D 转换元素定义透视视图。</td>
    
        </tr>
        </tbody></table>
    <p>实例:</p>
    <p>X轴旋转:</p>
    <div class="oneX"></div>
    <p>Y轴旋转:</p>
    <div class="oneY"></div>
    <p>平面旋转:</p>
    <div class="one"></div>
    <p>transform-origin定位旋转的锚点:就是设置图形按照哪一个点旋转。举例:把一张白纸使用冒顶钉在墙上,转动白纸,白纸围绕钉子转,钉子的位置就是锚点。</p>
    <table class="reference">
    
        <tbody><tr>
            <th style="width:25%">值</th>
            <th>描述</th>
        </tr>
    
        <tr>
            <td>x-axis</td>
            <td>
                <p>定义视图被置于 X 轴的何处。可能的值:</p>
                <ul class="listintable">
                    <li>left</li>
                    <li>center</li>
                    <li>right</li>
                    <li><i>length</i></li>
                    <li><i>%</i></li>
                </ul>
            </td>
        </tr>
    
        <tr>
            <td>y-axis</td>
            <td>
                <p>定义视图被置于 Y 轴的何处。可能的值:</p>
                <ul class="listintable">
                    <li>top</li>
                    <li>center</li>
                    <li>bottom</li>
                    <li><i>length</i></li>
                    <li><i>%</i></li>
                </ul>
            </td>
        </tr>
    
        <tr>
            <td>z-axis</td>
            <td>
                <p>定义视图被置于 Z 轴的何处。可能的值:</p>
                <ul class="listintable">
                    <li><i>length</i></li>
                </ul>
            </td>
        </tr>
        </tbody></table>
    <div class="oneO"></div>
    <p>transform-style设置旋转模式为2D还是3D。3d效果必须采用transform支持3d的方法,否则将会是2D效果。</p>
    <table >
    
        <tbody><tr>
            <th style="width:25%">值</th>
            <th>描述</th>
        </tr>
    
        <tr>
            <td>flat</td>
            <td>表示所有子元素在2D平面呈现。</td>
        </tr>
    
        <tr>
            <td>preserve-3d</td>
            <td>表示所有子元素在3D空间中呈现。</td>
        </tr>
        </tbody></table>
    <div class="one3D">3D</div>
    <div class="one2D">2D</div>
    </body>
    <script type="text/javascript">
        var divX = document.getElementsByClassName("oneX")[0];
        var divY = document.getElementsByClassName("oneY")[0];
        var div = document.getElementsByClassName("one")[0];
        var divO = document.getElementsByClassName("oneO")[0];
        var div3D = document.getElementsByClassName("one3D")[0];
        var div2D = document.getElementsByClassName("one2D")[0];
        var i=0;
        setInterval(function () {
            i+=5;
            divX.style.transform="rotateX("+i+"deg)";
            divY.style.transform="rotateY("+i+"deg)";
            div.style.transform="rotate("+i+"deg)";
            divO.style.transform="rotate("+i+"deg)";
            div3D.style.transform="rotate3d(75,75,75,"+i+"deg)";
            div2D.style.transform="rotate("+i+"deg)";
            if(i==720){
                i=0;
            }
            /*transform: rotateY(0deg);
            -moz-transform: rotateY(0deg);
            -webkit-transform: rotateY(0deg);
            -ms-transform: rotateY(0deg);*/
    
        },100);
    </script>
    </html>

     

    transform属性

    只有在transform属性存在情况下transform-style和transform-origin才会有效果。

    transform属性介绍:

    描述
    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 转换元素定义透视视图。

    实例:

    X轴旋转:

     

    Y轴旋转:

     

    平面旋转:

     

    transform-origin定位旋转的锚点:就是设置图形按照哪一个点旋转。举例:把一张白纸使用冒顶钉在墙上,转动白纸,白纸围绕钉子转,钉子的位置就是锚点。

    描述
    x-axis

    定义视图被置于 X 轴的何处。可能的值:

    • left
    • center
    • right
    • length
    • %
    y-axis

    定义视图被置于 Y 轴的何处。可能的值:

    • top
    • center
    • bottom
    • length
    • %
    z-axis

    定义视图被置于 Z 轴的何处。可能的值:

    • length
     

    transform-style设置旋转模式为2D还是3D。3d效果必须采用transform支持3d的方法,否则将会是2D效果。

    描述
    flat 表示所有子元素在2D平面呈现。
    preserve-3d 表示所有子元素在3D空间中呈现。
    3D
    2D

    转载于:https://www.cnblogs.com/gynbk/p/10769012.html

    展开全文
  • css3 transform旋转属性创建立体纹理文字特效
  • CSS3 transform旋转属性

    千次阅读 2012-12-29 13:03:18
    目前越来越多的浏览器兼容CSS3标准了,CSS3里有一个使对象旋转属性transform rotate,号称兼容CSS3的浏览器对它的支持也不算好,好在Firefox、Webkit和Opera这些浏览器都已经提供了官方的hack去支持这个属性。...

    目前越来越多的浏览器兼容CSS3标准了,CSS3里有一个使对象旋转的属性transform rotate,号称兼容CSS3的浏览器对它的支持也不算好,好在Firefox、Webkit和Opera这些浏览器都已经提供了官方的hack去支持这个属性。唯独在IE浏览器里对这个transform属性无法通过一般的CSS写法去实现。

    在W3C官方的标准里,通过transform属性使对象旋转的写法如下:

     transform: rotate(40deg); /* 其中40是旋转的角度 */

    可是由于目前几乎所有的浏览器对这个属性的渲染效率都很低,所以我们可以用下面的hack去提高渲染效率:
     -o-transform: rotate(40deg); /* Opera浏览器 */
    -webkit-transform: rotate(40deg); /* Webkit内核浏览器 */
    -moz-transform: rotate(40deg); /* Firefox浏览器 */

    由于目前所有版本的IE都不兼容CSS3,所以我们只能通过IE的CSS滤镜来实现,写法如下:

    filter: progid  XImageTransform.Microsoft.Matrix(sizingMethod='auto expand',
    M11=0.7660444431189777, M12=-0.6427876096865394, M21=0.6427876096865398,
    M22=0.7660444431189779)";

    这个一个相当复杂的滤镜,详细的参数大家可以看看这个网页。

    关于这篇文章的演示,大家可以看这个DEMO: IE浏览器css-Transforms演示

    PS:大家可以下载本文提供的DEMO,然后把代码里 transform 属性放在三个浏览器的hack 面,刷新一下页面看看会有什么现象。我在Firefox里看到的是中间那个旋转的DIV会跳动一下。

    Tip:transform 一个相当复杂的属性,目前可以实现旋转和动画效果,我认为这个属性在CSS3标准完全确定下来以后会变得更加强大。

    展开全文
  • poker1.gif1.属性介绍属性transform...为让图片2D旋转属性下面为实现上面图片的案例代码旋转img{margin: 100px;transition: all 0.6s; /*过渡时间为0.6秒*//*transform-origin: center center; /*默认值*//*trans...

    b3bb50430cdf

    poker1.gif

    1.属性介绍

    属性transform:rotate();为让图片2D旋转的属性

    下面为实现上面图片的案例代码

    旋转

    img{

    margin: 100px;

    transition: all 0.6s; /*过渡时间为0.6秒*/

    /*transform-origin: center center; /*默认值*/

    /*transform-origin: top left;*/

    /*transform-origin: 20px 30px;*/

    }

    img:hover{

    transform: rotate(360deg); /*deg为旋转度数*/

    }

    2. 旋转相册

    案例代码:

    div{

    width: 220px;

    height: 310px;

    position: relative;

    border: 1px solid pink;

    margin: 300px 300px;

    float: left;

    }

    .div2{

    margin: 300px 300px;

    float: left;

    }

    .div2 img{

    transform-origin: center center; /*右边扑克中心旋转*/

    }

    div img{

    width: 100%;

    height: 100%;

    position: absolute;

    top: 0;

    left: 0;

    transition: all 0.6s;

    transform-origin: top right; /*左边扑克绕右上角旋转*/

    }

    /*下面为每张图片设置需要旋转的度数*/

    div:hover img:nth-child(1){

    transform: rotate(60deg);

    }

    div:hover img:nth-child(2){

    transform: rotate(120deg);

    }

    div:hover img:nth-child(3){

    transform: rotate(180deg);

    }

    div:hover img:nth-child(4){

    transform: rotate(240deg);

    }

    div:hover img:nth-child(5){

    transform: rotate(300deg);

    }

    div:hover img:nth-child(6){

    transform: rotate(360deg);

    }

    效果图:

    b3bb50430cdf

    Rpoker2.gif

    如有错误或建议欢迎大家指出与评论哈,希望这篇博文能帮助到大家,也可以分享给需要的人。

    展开全文
  • 使用CSS3用户界面及透明和旋转属性.ppt
  • IE浏览器CSS transform旋转属性的演示

    千次阅读 2014-07-08 09:06:08
    IE浏览器CSS transform旋转属性的演示 body {  font-family: "Arial", sans-serif; } #ptOfRef {  border: #000 solid 3px;  background: #6FF;  width: 204px;  height: 204px;  position: ...
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>IE浏览器CSS transform旋转属性的演示</title>
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" />
    <style type="text/css">
    body {
     font-family: "Arial", sans-serif;
    }
    #ptOfRef {
     border: #000 solid 3px;
     background: #6FF;
     width: 204px;
     height: 204px;
     position: absolute;
     top: 100px;
     left: 100px;
    }
    #example {
     position: absolute;
     top: 100px;
     left: 100px;
     border: #09F solid 1px;
     background: #F90;
     font-weight: 900;
     color: #FFF;
     padding: 10px;
     display: block;
     width: 200px;
     height: 200px;
     margin-top: -1px;
     margin-left: -1px;
     transform: rotate(40deg);
     -o-transform: rotate(40deg);
     -webkit-transform: rotate(40deg);
     -moz-transform: rotate(40deg);
     filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7660444431189777, M12=-0.6427876096865394, M21=0.6427876096865398, M22=0.7660444431189779)}
    </style>
    <!--[if IE]>
    <style type="text/css">
    #example {
     top: 50px;
     left: 50px;
    }
    </style>
    <![endif]-->
    </head>
    <body>
    <div id="ptOfRef"></div>
    <div id="example">这是一个CSS旋转属性的演示</div>
    </body>
    </html>
    展开全文
  • 效果图: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">...meta name="viewport" content="width=device-width, initial-scale=1.0">... ...
  • css3 animation属性制作旋转文字动画切换效果
  • CSS/CSS3 属性大全

    2016-09-21 23:07:56
    列指示该属性是在哪个 CSS 版本(CSS1、CSS2 或 CSS3)中定义的。 CSS3 动画属性(Animation) 属性 描述 CSS @keyframes 规定动画。 3 animation 所有动画属性的简写属性,除了 animation-...
  • 解决办法:display:block
  • 本文简单阐述了如何实现旋转的立方体效果,读者需要具备基本的HTML,CSS和JS基础知识。 一,基本概念: 1,三维坐标轴,如下图 ![三维坐标图示]...
  • 使用css3属性做一个循环旋转的动画

    千次阅读 2019-08-21 22:14:07
    做这个动画是使用css3中的animation 和 @-webkit-keyframes 组合使用来完成 //这是html部分代码 <div class="home"> <img alt="logo" src=...
  • rotating_squares_animation:使用css属性进行旋转旋转,用于不同的bg颜色更改js
  • vue css点击旋转 Vue微调器CSS加载器...Amazing collection of pure CSS vue spinners components of css spinners for ajax or loading animation based on loading.io. CSS旋转器的纯CSS vue旋转器组件的惊人集合...
  • css中关于旋转属性transform: rotate影响文字轻微变形的解决办法。 在最近搭建自己的网站时遇到了一个问题,如下面图片所: 如上所示,左边的是预期效果,右边的是实际效果。 在笔者查看左边源码和样式后发现与右边...
  • 如图,点击更换,旁边的的小圆圈旋转一定的... //旋转角度$('.refresh-js').on('click',function(){ $('.img-js').css({ 'transition': 'all 1s',  '-webkit-transition': 'all 1s', /* Safari */ 'transform...
  • CSS3属性

    千次阅读 多人点赞 2018-08-29 20:00:16
    CSS3属性 CSS 用于控制网页的样式和布局。CSS3 是最新的 CSS 标准。 \1. 选择器 2.盒模型 3.背景和边框 4.文字特效 5.2D/3D转换 6.过渡 7.动画 8.透明度 CSS3高级选择器 p:first-of-type : 返回指定p元素的第一...
  • CSS margin 属性CSS 单边外边距属性

    千次阅读 2020-02-15 19:35:27
    围绕在元素边框的空白...CSS margin 属性 设置外边距的最简单的方法就是使用 margin 属性。margin用于设置对象标签之间距离间隔,比如2个上下排列的DIV盒子,我们就可以使用margin样式实现上下2个盒子间距。 marg...
  • 主要介绍了基于css3新属性transform及原生js实现鼠标拖动3d立方体旋转 的相关资料,需要的朋友可以参考下
  • css动画属性+垂直居中

    2019-09-23 22:35:34
    css动画属性
  • CSS - 使用CSS3旋转文本

    千次阅读 2019-02-09 15:53:20
    前言 CSS3提供了一个旋转文本的简单方法。如果项目不需要使用复杂的画布元素,使用transform:rotate属性不失为一个易于...然后,添加CSS transform属性旋转文本。每个浏览器实现旋转的方式都不同,所以需要设置每...
  • css设置属性不可见 CSS | 背面可见性 (CSS | backface-visibility Property) Kickstart: 启动: Developing a web page can sometimes prove to be challenging as we deal with many elements and sometimes we ...
  • CSS filter属性详解

    千次阅读 2020-05-06 10:26:02
    filter CSS属性将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像,背景和边框的渲染。 CSS标准里包含了一些已实现预定义效果的函数。你也可以参考一个SVG滤镜,通过一个URL链接到SVG滤镜元素(SVG filter...
  • ="IE10") { // IE 浏览器进行的旋转,IE不提供transform,所以得自己计算位置   cosDeg = Math.cos(currentDeg * Math.PI / 180);  sinDeg = Math.sin(currentDeg * Math.PI / 180);  with(target.filters...
  • css动画属性有哪些

    2020-02-29 15:42:20
    最近在逆战班学习了css动画属性,开始感觉还是不错滴,但过了几天有点忘记了,就再次翻了翻笔记整理了一下,希望能加深印象。有错的地方希望能够指点指点。 css动画结合属性有: transform(动画变形属性) transition...
  • CSS旋转与翻转

    千次阅读 2015-06-03 23:00:13
    css 2.0还是没有翻转的,3.0里面有rotate属性,这个可以把元素进行任意角度旋转,灰常强大。除了这个rotate,还有一个scale,一般用法格式是 -moz-transform:scale(1,1); 括弧里面(1,1)前者表示X轴,后者表示Y...
  • CSS属性:字体属性和文本属性

    千次阅读 2019-10-04 09:37:58
    CSS的单位 字体属性 文本属性 定位属性:position、float、overflow等 CSS的单位 html中的单位只有一种,那就是像素px,所以单位是可以省略的,但是在CSS中不一样。 CSS中的单位是必须要写的,因为它没有默认单位。...
  • CSS常用属性速查表

    千次阅读 2016-03-20 01:34:56
    CSS 字体属性(Font) 属性 描述 CSS  font 在一个声明中设置所有字体属性。 1  font-family 规定文本的字体系列。 1  font-size 规定文本的字体尺寸。 1  font-size-adjust 为元素规定 aspect 值。 2  ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 32,380
精华内容 12,952
关键字:

css旋转属性