【知了堂学习笔记】css3 transform 3d制作字母开门3D效果

最新推荐文章于 2022-05-11 21:57:27 发布

JALex0

最新推荐文章于 2022-05-11 21:57:27 发布

阅读量878

点赞数 2

分类专栏： css3 文章标签： css3 3d

本文链接：https://blog.youkuaiyun.com/JALex0/article/details/77779730

版权

通过css3选择器:hover及一些过渡效果来实现鼠标移入字母往左边开门的效果。

：hover是一个伪类，是鼠标指针移到元素的上面

transition是css3里面的过渡效果，是一种样式变化成另一种效果

transform是对内容进行旋转，旋转分为2D和3D的，旋转可以沿着X轴或Y轴及Z轴进行旋转。

transform:rotateY(-40deg); 在括号里面跟的是一个度数，实现内容的旋转，

下面是html代码：

<!DOCTYPEhtml>
<html lang="en">
<head>
       <meta charset="UTF-8">
       <title>Document</title>
       <link rel="stylesheet"type="text/css" href="css/demo.css">
</head>
<body>
       <div class="container">
              <div class=&

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

JALex0

关注关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

html自动开门特效,利用css3伪元素制作3d开门效果

weixin_42467661的博客

05-31

941

本教程是一个有趣的开关门效果，每个字母就是一个门，我们将使它能够从四个方向打开关闭，这里采用的技术主要是在伪元素上使用CSS transforms and transitions属性。注意：不是每一个浏览器都支持伪元素，最好是使用Chrome或Firefox浏览器观看。HTML结构:CJ8ACSS样式：为每一个字母的span添加一些基本样式。我们将会为这些字母添加3种样式，字母添加较深的颜色，使字...

CSS3实现的4种3D文字效果

m0_64460287的博客

01-04

2144

1、3D文字效果运用原理就是像Photoshop一样，我们在文字的下方或上方复制了多个图层，并把每一个层向左上或右下方向移动一个1px距离，从而制作出3D效果。换成用text-shadow制作就是使用多个阴影，并把阴影色设置相同，给其使用rgba色效果更佳。其效果是用css重新使用的文字阴影和文本前景的rgba色组合而成。在文本的前景色和阴影上同时使用rgba色，使底层的文字是通过影子可见。这种风格的文字效果是由两个文本阴影合成的，这里需要注意的是：第一个阴影色和背景色相同；3实现的4种3D文字效果。

参与评论您还未登录，请先登录后发表或查看评论

css3实现开门动画

@Nose~he

03-29

2092

css3实现开门动画效果今天我们使用css3实现以下开门动画，首先我们来看一下效果图接下来我们来实现一下这个效果先进行布局，布局的实现由很多种，这里我们需要position和float进行布局，首先先把门放到正中央，我们可以利用以下代码实现 width: 300px; height: 300px; position: absolute; ...

CSS3字母卡片开关门3d效果

souhugirl的专栏

02-08

657

这是在伪元素上使用css3 transform属性制作的字母卡片开关门3d效果，鼠标移动到字母上时，字母便会有开门的3d效果，十分有趣。在线演示：http://www.htmleaf.com/Demo/2014100997.html 下载地址：http://www.htmleaf.com/css3/transform/2014100998.html

html自动开门特效,利用CSS3实现开门效果实例源码

weixin_34861332的博客

05-31

619

先来看看效果图以下实例源码复制代码代码如下:css3开门.door{ position:relative; width:400px; height:300px; overflow:hidden; border:2px solid #000; background:#000;}.door:before,.door:after{ content:''; position:absolute; left:...

transform+perspective开门效果

u010234868的专栏

04-06

169

HTML代码： <div class="door"> <img src="images/taobao/banner1.jpg" alt=""> <div class="door-l"></div> <div class="door-r"></div> </div> CSS代码： .door { width: 520px; height: 280px; margin: 0 auto; position: rel

【前端学习笔记 CSS系列十六】开门动画

GUANYX的博客

02-15

1028

一、效果鼠标滑过，门会打开，展示里面的内容二、代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> body { perspective: 1000px; } section { width: 520px; height: 28

css使用移动、变形做一个开门效果

qq_41951890的博客

05-11

244

1-变形-移动盒子代码：运行效果： 2-盒子居中代码：运行效果： 3-开门案例运行效果：

分享一款css3手撸特效登录页面

weixin_33912246的博客

07-29

875

2019独角兽企业重金招聘Python工程师标准>>> ...

html css jquery怎么做开门的效果

林洪炳的日常技术积累

07-19

5069

最近有一个客户是做售门的生意的，客户需求是：进入官网，首先要有一个门被打开（效果），然后才显示网站首页。那么，这个开门的效果要怎么做呢，我构思了一下，用jquery来做动画效果，还是挺简单的。好，不多说，先上代码：开门效果 html,body{ height:100%;

JS点击开门效果

04-02

JS点击开门效果，通过JS点击按钮呈现模拟开门的效果，开门动画采用CSS动画效果。

多层嵌套的CSS 3D动画技术详解

默默努力的猪

04-27

997

IE9及其以下版本完全不支持CSS 3D transforms技术，Opera 12也不支持。具体支持信息请查看caniuse.com。 CSS动画是当前一种非常火爆的技术，我说的并不是一些简单的颜色变换或长短属性变换，我说的是3D变换技术；纯CSS实现的翻滚旋转立方体就是最典型的例子。网上能找到很多关于CSS动画的代码，但对于一个程序员来说，真正理解其为什么会动起来的原理是非常重要的。

css3实现开门效果

weixin_45308258的博客

01-20

1153

css3实现开门效果 <div class="big"> <div class="box men"> <div class="door"></div> <div class="door-t"></div> <div class="d...

利用html+CSS（transition,transform,animation）完成开门关门效果

HHyuang的博客

12-23

1553

利用html+CSS（transition,transform,animation）完成开门关门效果一:效果展示二:html代码三:CSS代码一:效果展示关门效果：开门效果：二:html代码 <div id="a"> <div id="a1"></div> <div id="a2"></div> </div> 建立两个div存放门的图片三:CSS代码 <style>

用css3,transform3d制作房屋全景展示效果（一）

FE学习笔记

05-02

9845

我最终想要做一个这样的效果，如图：（注：这本来是一个横向旋转的动图，但是动图有点大，只能先放一个静态的）我选择用手机端来展示，因为手机端浏览器对css3支持的比较好。制作这样的一个效果之前，首先要学会制作一个3d的盒模型，就跟div盒子布局一样。但是自从有了h5和css3之后，我们就有了制作3d盒子模型的能力。不多说先写为敬。首先我们先建立一个h5的基础结构： html

纯CSS3绘制26个英文字母

火雨(Nick)

03-20

3496

纯CSS3绘制26个英文字母在这里你看到的26个标准的英文字母并不是普通的字体，它们是用CSS在空白的页面上绘制出来的，纯css作品。主要运用了CSS3里的多个新变换功能，需要使用最新的浏览器进行观赏。网页代码中用到（）和Div边距设置和浮动（margin:20px 5px 10px 80px; float: left;）。其中边距Margin四个像素

纯css3实现可按下动效按钮

qq_40544291的博客

03-30

1459

效果如下: css代码: <style> body { background: #272822; margin: 0; perspective: 600px; -webkit-perspective: 600px; } /* Button ...

纯CSS3实现的鼠标悬停时边框旋转

01-03

959

纯CSS3实现的鼠标悬停时边框旋转的动画效果

css-transform-案例-翻转牌效果

pyhui的技术博客

06-17

660

思路外部盒子包两个盒子外部盒子绝对定位，内部两盒子相对定位外部盒子hover触发内部盒子的变形内部盒子变形的具体调整完整代码 <style> .outter{ border: 2px solid black; position:relative; width: 800px; height: 300px; ...