css3 2D 3D 过渡

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <title>css3动画</title>
</head>
    <style>
        .xuanzhuan{
            width: 100px;
            height: 80px;
            background: red;
            transform:rotate(10deg);  /*旋转:rotate() 参数为(0-360deg)*/
            transform:translate(40px,50px);  /* translate:x,y;定位x轴,y轴*/
            transform:scale(2,4);   /*scale(x,y)放大原来的2倍和四倍*/
            transform: skew(30deg,20deg);  /*skew(x,y)x轴y轴旋转多少deg*/
            /*transform:matrix()   matrix() 方法把所有 2D 转换方法组合在一起。 */
        }
        .sand{
            width: 100px;
            height: 80px;
            background: red;
            transform: rotateX(120deg);   /*x轴旋转120deg*/
            /*transform-style:preserve-3d;规定被嵌套元素如何在 3D 空间中显示。*/
            /*transform: rotateY(120deg);   Y轴旋转120deg*/
            /*translate3d(x,y,z)   定义 3D 转化。*/
            /*transform:translateX(n) 沿着 X 轴移动元素*/
            /*transform:translateY(n) 沿着 Y 轴移动元素*/
            /*scaleX(n) 改变元素的宽度。*/
            /*scaleY(n) 改变元素的高度。*/
            /*skewX(angle)  倾斜转换,沿着 X 轴。*/
            /*skewY(angle)  倾斜转换,沿着 Y 轴。*/
            /*rotate3d(x,y,z,angle) 定义 3D 旋转。*/
            /*rotateZ(angle)定义沿 Z 轴的 3D 旋转*/
        }
        /*3d镶嵌 css*/
        #div1{
            position: relative;
            height: 200px;
            width: 200px;
            margin: 100px;
            padding:10px;
            border: 1px solid black;
        }
        #div2{
            padding:50px;
            position: absolute;
            border: 1px solid black;
            background-color: red;
            transform: rotateY(60deg);
            transform-style: preserve-3d;
            -webkit-perspective:350;       /*规定 3D 元素的透视效果。*/
            -webkit-perspective-origin: 0% 0%;
            /*该属性必须与 perspective 属性一同使用,而且只影响 3D 转换元素。*/
        }
        #div3{
            padding:40px;
            position: absolute;
            border: 1px solid black;
            background-color: yellow;
            transform: rotateY(80deg);
        }
        /*过渡css*/
        .guo{
            width:100px;
            height:100px;
            background:blue;
            transition:width 2s;
/*transition: property duration timing-function delay;*/
/*transition-property      规定设置过渡效果的 CSS 属性的名称。*/
/*transition-duration    规定完成过渡效果需要多少秒。*/
/*transition-delay    定义过渡效果何时开始。*/
/*transition-timing-function    规定速度效果的速度曲线。*/


        }
        .guo:hover{
            width:300px;
        }
    </style>
<body>
    <div class="xuanzhuan"></div>
    <p class="sand"></p>
    <!-- 3d镶嵌 -->
    <div id="div1">
          <div id="div2">HELLO
              <div id="div3">YELLOW</div>
          </div>
    </div>
    <!-- 过渡 -->
    <div class="guo"></div>
</body>
</html>

原文地址:https://www.cnblogs.com/zhaoxialong/p/8260512.html

时间: 2024-11-06 07:20:21

css3 2D 3D 过渡的相关文章

CSS自学笔记(13):CSS3 2D/3D转换

CSS3中新增了对元素进行2D和3D的转换效果,这样可以是开发人员很方便的做出视觉效果更好的网页来. 通过CSS3中属性的定义,我们可以对元素进行移动.缩放.拉伸.旋转等等,可以通过定义transform属性来实现转换效果. 浏览器支持 属性 浏览器支持 2D transform IE Firefox Chrome(-webkit-) Safari(-webkit-) Opera 3D transform IE Firefox Chrome(-webkit-) Safari(-webkit-)

关于CSS3转换2D,3D过渡与动画方法

总结: 观察者远近 perspective:指定距离,必须带像素单位px[ 观察者视角 perspective-origin:一般默认居中即可 ] 转换 transform 包含:rotate,translate,scale,matrix,perspective 子元素3D效果 transform-style : preserve-3d | flat [ 对象transform-origin一般默认居中即可 ] [ 元素背面 backface-visibility:一般默认可见即可 ] 元素旋转

css3的3D和2D

css3的3D旋转:rorateX():参数为正值时,盒子是围绕x轴,完成从Y轴正方向到Y轴负方向的旋转,视觉上呈现高度上的变化.rorateY():参数为正值时,盒子是围绕Y轴,完成从X轴正方向到X轴负方向的旋转,视觉上呈现盒子宽度上的变化.css2D旋转:translate(a,b):a,b,均大于0时,a表示是在水平方向的位移(从左向右),b是垂直方向的位移(从上往下),rotate(a):a>0,在水平面上顺时针旋转的度数,a<0时,在水平面上逆时针旋转度数.scale(x,y):x是

css3 2d转换3d转换以及动画的知识点汇总

css3 2d转换 2d转换的方法: 1.移动 translate(x, y) 可以改变元素的位置,x.y可为负值: 2.缩放 scale(x, y) 可以对元素进行水平和垂直方向的缩放,x.y的取值可为小数,不可为负值: 4.旋转 rotate(deg) 可以对元素进行旋转,正值为顺时针,负值为逆时针: 5.倾斜 skew(deg, deg) 可以使元素按一定的角度进行倾斜 2d转换的属性: transform transform-origin 用法: 例如: div { transform:

CSS3 2D Transform

在 一个二维或三维空间,元素可以被扭曲.移位或旋转.只不过2D变形工作在X轴和Y轴,也就是大家常说的水平轴和垂直轴:而3D变形工作在X轴和Y轴之外, 还有一个Z轴.这些3D变换不仅可以定义元素的长度和宽度,还有深度.我们将首先讨论元素在2D平面如何变换,然后我们在进入3D变换的讨论. CSS3 2D变换让Web设计师有了更多的自由来装饰和变形HTML组件.同时让设计师有更多的功能装饰文本和更多动画选项来装饰Div元素.在CSS3 2D变形中主要包含的一些基本功能如下. 位移translate()

【学】CSS3的3D动画 ——3D旋转(1)—— 妙味课堂

最近学了妙味的css3的动画,2D,3D的都有,先写一个最简单的3d翻转效果,鼠标移入div,正反面翻转效果. 注意点有: 要给正反面外面加个父级: transform-style: preserve-3d;是加在正反面的父级,使动画具有3d的效果:但是ie11并不支持preserve-3d perspective也要加在父级上,使动画具有透视效果: 要给父级也加上宽高,否则动画没有效果 <style> #box{ margin: 70px auto; width: 300px; height

CSS3的3D转换效果详解介绍

CSS3的3D转换效果详解介绍:本章介绍一下CSS3的3D转换效果,此效果的实现依靠的是transform属性,3D转换只是此属性的部分应用,更多相关内容可以参阅CSS3的transform属性总略介绍一章节.掌握3D转换效果,可以从三个方法作为突破口,分别是rotateX, rotateY, rotateZ,在2D变换过程中rotate()函数的应用,它表示旋转的意思,由于是2D变换,所以它只是在一个平面进行旋转,所以无需细分,具体可以参阅CSS3的2D转换效果详细介绍一章节. 下面分别介绍一

CSS3 2D 转换【旋转transform:rotate(30deg); 移动transform: translate(50px,100px); 放大缩小transform:scale(2,4)】

CSS3 2D 转换 CSS3 转换 CSS3转换,我们可以移动,比例化,反过来,旋转,和拉伸元素. 它是如何工作? 变换的效果,让某个元素改变形状,大小和位置. 您可以转换您使用2D或3D元素. 浏览器支持 表格中的数字表示支持该属性的第一个浏览器版本号. 紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号. Property           transform 36.0 4.0 -webkit- 10.0 9.0 -ms- 16.0 3.5

css3的3d起步——分享

css3的3d起步 要玩转css3的3d,就必须了解几个词汇,便是透视(perspective).旋转(rotate)和移动(translate).透视即是以现实的视角来看屏幕上的2D事物,从而展现3D的效果.旋转则不再是2D平面上的旋转,而是三维坐标系的旋转,就包括X轴,Y轴,Z轴旋转.平移同理. 当然用理论来说明,估计你还不明白.下面是3个gif: 沿着X轴旋转 沿着Y轴旋转 沿着Z轴旋转 旋转应该没问题了,那理解平移起来就比较容易了,就是在在X轴.Y轴.z轴移动. 你可能会说透视比较不好理