HTML5+CSS3(三)

最新推荐文章于 2022-10-06 18:14:18 发布
最新推荐文章于 2022-10-06 18:14:18 发布
阅读量150 收藏
点赞数
分类专栏： # HTML5+CSS3 文章标签： animation css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45419127/article/details/116307209
版权

三维坐标系

简称立体坐标系 比二维坐标系多一个Z轴

在这里插入图片描述

3D位移

3D位移在2D位移的基础上多一个可移动的Z轴

transform: translate3d(x,y,z);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3D位移</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
     
        div {
            width: 200px;
            height: 200px;
            background-color: purple;
            transform: translate3d(600px,100px,100px);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

在这里插入图片描述

注意事项

  • x轴 y轴一般用px及百分比当做单位
  • z轴一般用px当做单位，必须借助透视功能实现3D;
  • z轴向外移动一般是正值，向内移动是负值。

perspective

特点

  • 透视是视距，便是人的眼睛到屏幕的距离,单位为px
  • 透视写在被观察元素的父元素上。
  • 透视的单位越大，看到的物品就越小，透视的单位越小，看到的物品就越大。
  • 在透视固定的情况下，z轴越大，看到的物品就越大，z轴越小，看到的物品就越小。

在这里插入图片描述
在这张图中，d为透视，位于人的眼睛和被观察物体的中间

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>perspective</title>
    <style>

        body {
            perspective:500px
        }
        div {
            width: 200px;
            height: 200px;
            background:pink;
            transform: translate3d(600px,100px,100px);
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>

translateZ

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>translateZ</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            /*透视写在被观察元素的父元素上*/
            perspective: 500px;
        }
        div {
            width: 100px;
            height: 100px;
            background-color: purple;
            margin: 200px auto;
            transform: translateZ(200px);
        }
    </style>
</head>
<body>
    <div></div>
    <div></div>

</body>
</html>

在这里插入图片描述

3D旋转

3D 旋转可以让元素在三维平面内沿着 x 轴、y 轴、z 轴 或者自定义轴进行旋转

rotateX

左手弯曲的手指方向即为x轴的正方向

在这里插入图片描述


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>rotateX</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            /*实现3D功能  必须借助透视*/
            perspective: 200px;
        }
        img {
            display: block;
            width: 400px;
            margin: 200px auto;
            transition: all 2s linear 0s;
        }
        img:hover {
            transform: rotateX(45deg);
        }
    </style>
</head>
<body>
    <img src="./images/desktop.jpg" alt="">
</body>
</html>

在这里插入图片描述

rotateY

左手手指弯曲的方向即为y轴的正方向

在这里插入图片描述


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>rotateY</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            /*实现3D功能  必须借助透视*/
            perspective: 200px;
        }
        img {
            display: block;
            width: 400px;
            margin: 200px auto;
            transition: all 2s linear 0s;
        }
        img:hover {
            transform: rotateY(45deg);
        }
    </style>
</head>
<body>
<img src="./images/desktop.jpg" alt="">
</body>
</html>

在这里插入图片描述

rotateZ

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>rotateZ</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            /*实现3D功能  必须借助透视*/
            perspective: 200px;
        }
        img {
            display: block;
            width: 400px;
            margin: 200px auto;
            transition: all 2s linear 0s;
        }
        img:hover {
            transform: rotateZ(45deg);
        }
    </style>
</head>
<body>
<img src="./images/desktop.jpg" alt="">
</body>
</html>

在这里插入图片描述

rotate3d

  • transform: rotate3d(x, y, z, deg) – 沿着自定义轴旋转 deg 为角度
  • transform: rotate3d(1, 1, 0, 45deg) – 沿着对角线旋转 45deg
  • transform: rotate3d(1, 0, 0, 45deg) – 沿着 x 轴旋转 45deg

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>rotate3D</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        img {
            display: block;
            width: 600px;
            margin: 200px auto;
            transition: all 2s linear 0s;
        }
        img:hover {
            /*对角线旋转45deg*/
            transform: rotate3d(1,1,0,45deg);
        }
    </style>
</head>
<body>
    <img src="./images/desktop.jpg" alt="">
</body>
</html>

在这里插入图片描述

transform-style

transform-style；preserve-3d 让子元素保持3d空间环境

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>transform-style</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body {
            perspective: 600px;
        }
        @keyframes scale {
            0% {
                transform: rotateX(0deg);
            }
            100% {
                transform: rotateX(360deg);
            }

        }
        .box {
            position: relative;
            width: 500px;
            height: 500px;
            margin: 200px auto;
            transform-style: preserve-3d;
            background-color:purple;
            animation: scale 2s linear 0s infinite;
        }
        .box div:nth-of-type(n){
            position: absolute;
            top: 0;
            left: 0;
            width: 500px;
            height: 500px;
        }

        .box div:nth-of-type(1) {
            background-color: yellow;
            transform: rotateX(120deg);
        }
        .box div:nth-of-type(2) {
            background-color: green;
            transform: rotateX(240deg);
        }

    </style>
</head>
<body>
    <div class="box">
        <div></div>
        <div></div>
    </div>
</body>
</html>

在这里插入图片描述

案例之演示

两面翻转的盒子

  • 先准备一个大盒子 里面装着两个小盒子
  • 让其中的一个盒子翻转180deg
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>两面反转的盒子</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            perspective: 500px;
        }

        .box {
            position: relative;
            width: 500px;
            height: 500px;
            margin: 200px auto;
            /* 子元素保持3D空间*/
            transform-style: preserve-3d;
            transition: all 0.5s linear 0s;
        }
        .box:hover {
            transform: rotateY(180deg);
        }
        .front,
        .back {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            text-align: center;
            line-height: 500px;
            border-radius: 50%;
        }
        .front {
            background-color: purple;
            z-index: 5;
        }
        .back {
            background-color: yellow;
            transform: rotateY(180deg);
        }
    </style>
</head>
<body>
<div class="box">
    <div class="front">尧子陌</div>
    <div class="back">临风笑却世间</div>
</div>
</body>
</html>

在这里插入图片描述

3D导航栏案例

当有transform属性时,位移放在最前面,切不能改变顺序.


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>3D导航栏</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        ul {
            /* 清除浮动 */
            width: 1200px;
            margin: 200px auto;
        }
        
        li {
            float: left;
            list-style: none;
            width: 180px;
            height: 50px;
            margin: 20px;
            /* 透视 */
            perspective: 500px;
        }
        
        .box {
            position: relative;
            width: 100%;
            height: 100%;
            /* 子元素开启3D空间 */
            transform-style: preserve-3d;
            /* 开启过渡 */
            transition: all 2s linear 0s;
        }
        
        .box:hover {
            transform: rotateX(90deg);
        }
        
        .front,
        .back {
            position: absolute;
            width: 100%;
            height: 100%;
            text-align: center;
            line-height: 50px;
        }
        
        .front {
            background-color: yellow;
            /* z轴正方向移动25px */
            transform: translateZ(25px);
        }
        
        .back {
            background-color: blue;
            /* 先向下移动25px 再延x轴反方向旋转90deg */
            transform: translateY(25px) rotateX(-90deg);
        }
    </style>

</head>

<body>
    <ul>
        <li>
            <div class="box">
                <div class="front"></div>
                <div class="back"></div>
            </div>
        </li>
        <li>
            <div class="box">
                <div class="front"></div>
                <div class="back"></div>
            </div>
        </li>
        <li>
            <div class="box">
                <div class="front"></div>
                <div class="back"></div>
            </div>
        </li>
        <li>
            <div class="box">
                <div class="front"></div>
                <div class="back"></div>
            </div>
        </li>
        <li>
            <div class="box">
                <div class="front"></div>
                <div class="back"></div>
            </div>
        </li>
    </ul>
</body>

</html>

在这里插入图片描述

3D木马

思路

  • 分析如下：给body设置透视 给div的父元素section设置开启3d效果
  • 把每个div盒子摆放到正确的位置 利用动画即可

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>旋转木马</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        body {
            /* 透视 */
            perspective: 500px;
        }
        /* 定义动画 */
        
        @keyframes rotate {
            0% {
                transform: rotateY(0deg);
            }
            100% {
                transform: rotateY(360deg);
            }
        }
        
        section {
            position: relative;
            width: 200px;
            height: 200px;
            margin: 200px auto;
            /* 开启3D效果 */
            transform-style: preserve-3d;
            /* 使用动画 */
            animation: rotate 3s linear 0s infinite;
        }
        
        section div:nth-of-type(n) {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        
        div img {
            width: 200px;
            height: 200px;
        }
        
        section div:nth-of-type(1) {
            transform: rotateY(0deg) translateZ(300px);
        }
        
        section div:nth-of-type(2) {
            transform: rotateY(60deg) translateZ(300px);
        }
        
        section div:nth-of-type(3) {
            transform: rotateY(120deg) translateZ(300px);
        }
        
        section div:nth-of-type(4) {
            transform: rotateY(180deg) translateZ(300px);
        }
        
        section div:nth-of-type(5) {
            transform: rotateY(240deg) translateZ(300px);
        }
        
        section div:nth-of-type(6) {
            transform: rotateY(300deg) translateZ(300px);
        }
    </style>
</head>

<body>
    <section>
        <div>
            <img src="./images/desktop.jpg" alt="">
        </div>
        <div>
            <img src="./images/desktop.jpg" alt="">
        </div>
        <div>
            <img src="./images/desktop.jpg" alt="">
        </div>
        <div>
            <img src="./images/desktop.jpg" alt="">
        </div>
        <div>
            <img src="./images/desktop.jpg" alt="">
        </div>
        <div>
            <img src="./images/desktop.jpg" alt="">
        </div>
    </section>
</body>

</html>

在这里插入图片描述

浏览器私有前缀

在这里插入图片描述

「已注销」
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
html5+css3+js登录页面
04-10
html5+css3+js登录页面模板，适用于网页设计的登录页面。html+css+js网页设计、大学生网页课程设计、期末大作业、毕业设计、网页模板，DW网页成品源代码等，2000+套Web案例源码，优质文章，关注作者获取更多源码。
3D转换 --继续学习
weixin_53317758的博客
04-08 948
3D移动 translate3d 3D移动在2D移动的基础上多加了一个可以移动的方向，就是z轴方向。 translform:translateX(100px):仅仅是在x轴上移动 translform:translateY(100px):仅仅是在Y轴上移动 translform:translateZ(100px):仅仅是在Z轴上移动(注意:translateZ一般用px单位 transform:translate3d(x,yz):其中xy、z分别指要移动的轴的方向的距离
动画+3D转换笔记
weixin_44325613的博客
01-02 337
动画 动画（animation）通过设置多个节点来精确控制一个或一组动画，用来实现复杂的动画效果 相比较过渡，动画可以实现更多变化，更多控制，连续自动播放等效果 制作动画步骤 定义动画 调用动画 keyframes定义动画 @keyframes 动画名称{ 0%{ 样式 } 100%{ 样式 } } 0%是动画的开始，100%是动画结尾。这样的规则就是动画序列 在@keyframes中规定某项CSS样式，就能创建由当前样式逐渐改为新样式的动画效果 动画是使元素从一种样式逐渐变化为
transform三大属性之rotate（旋转）
热门推荐
weixin_44167504的博客
09-05 4万+
transform三大属性之rotate
transform3D旋转
最新发布
minnyYu的博客
10-06 705
添加透视属性实现3D旋转效果
前端学习笔记之CSS3新特性3D转换 3.23
qq_36450483的博客
03-23 1695
前端学习笔记之CSS3新特性3D转换
HTML5+CSS3
09-17
该文档是HTML5+CSS3的总结笔记，把工作中的常用的知识点个记录下来，仅供学习和工作的参考资料，不做商业用途，版权归本人所有，侵权必究！
html5+css3+JS代码
05-22
在本篇文章中，我们将深入探讨这三种技术的详细知识点，并结合《精通html5+css3+JavaScript页面设计》这本书中的实践代码进行说明。 首先，HTML5（超文本标记语言第五版）是描述网页内容的标准语言。它引入了许多新...
html5+css3笔记资料
02-14
html5+css3笔记资料
HTML5+CSS3期末大作业——城市简介源码
05-05
在这个“HTML5+CSS3期末大作业——城市简介源码”项目中，学生或开发者将有机会实践这两门技术，构建一个介绍特定城市的网页。 HTML5作为最新的超文本标记语言版本，引入了许多新特性，旨在提高网页的交互性和可用...
html5实现3D动态旋转效果
01-07
这是通过html5实现有3D动态旋转效果，效果很不错。
CSS中的3D旋转
m0_56232007的博客
06-09 7204
一、3D旋转 格式： transform：rotateX（旋转角度） transform：rotateY（旋转角度） transform：rotateZ（旋转角度） transform：rotate3d（1,1,1,deg） 指定对象的3D旋转角度，其中前3个参数分别表示旋转的方向x,y,z取值为0/1 0表示不旋转 1表示旋转 注意： ***第4个参数表示旋转的角度，参数不允许省略*** 注意： 浏览器默认是2d的，如果
transform中rotate3d旋转方向
recallMei的博客
06-28 3427
rotate有四个参数 rotate3d(x,y,z,angle) 前三个分别为是否绕x，y，z旋转，1为是，0为否 rotatex、rotatez的旋转正方向是顺时针，rotatey的旋转正方向是逆时针
CSS3 3D转换
bwf_erg的博客
05-02 495
CSS3 允许您使用 3D 转换来对元素进行格式化,3D和2D的区别就是平面和空间的区别。 一、 rotateX()方法     rotateX()方法，围绕其在一个给定度数X轴旋转的元素。 代码例子： 运行效果：     二、 rotateY()方法     rotateX()方法，围绕其在一个给定度数X轴旋转的元素。 代码示例： div { transform:
还不知道transform 3D转换怎么用？看这个就够了
欢迎访问我的主页：https://www.bookbook.cc
03-21 8889
还不知道transform 3D转换怎么用？看这个就够了
CSS3 Transform变形（3D转换）
weixin_34408717的博客
10-31 405
CSS3 3D 转换三维变换使用基于二维变换的相同属性，如果您熟悉二维变换，你们发现3D变形的功能和2D变换的功能相当类似。CSS3中的3D变换主要包括以下几种功能函数：3D位移：CSS3中的3D位移主要包括translateZ()和translate3d()两个功能函数；3D旋转：CSS3中的3D旋转主要包括rotateX()、rotateY()、rotateZ()和rotate3d()四个功能...
transform中rotata3d旋转方向
weixin_30950607的博客
11-05 322
rotate有四个参数 rotate3d() = rotate3d(<number>,<number>,<number>,<angle>) 前三个分别为是否绕x，y，z旋转，1为是，0为否 rotatex、rotatez的旋转正方向是顺时针，rotatey的旋转正方向是逆时针。 转载于:https://www...
transform属性——css3变形效果3D
MOONCOM的博客
01-15 3866
由于3D是立体三维，在x、y轴的基础上一般会多出一个z轴，深入跃出轴。 要使用transform实现3D效果，首先需要为该元素或该元素的直接父元素设置如下2个属性属性 1、transform-style     该属性是指定嵌套元素如何在3D空间中呈现 属性值：  flat            默认值，表示所有子元素在2D平面呈现           preserve-3d     表示
基于css3的3D立方体旋转特效 （先translate与先rotate的不同）
sweetllh的博客
04-03 4892
3D变换基于几个比较重要的属性，perspective,translateZ,preserve-3d; 格式： 舞台(perspective) 容器(3D, preserve-3d) 内容3D实现立方体盒子： transform的4个属性，排序不同，带来的效果也不同。 先移动的代码：<!doctype html> <html lang="en"> <head> <meta c

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值