CSS3-3D

冷不防 2023-07-10 11:09 43阅读 0赞

# 一.平移translate3d() #

/*transform: translate3d(x,y,z); x和y可以是px可以是% z只能是px*/
    			transform: translate3d(100px,100px,300px);

# 二.翻转rotate() #

要翻转效果一定要给父元素设置perspective  
近大远小:近 代表视距小，则图片大

body{ 
    			对父元素设置
    			perspective: 500px;  
    			/*视距 眼睛到屏幕的距离 视距越小效果越明显 近大远小*/
    			/*视距是在父元素设置的，所以这里要图片翻转，就在body设置*/
    	}		
    		img:hover{ 	
    			transform: rotateY(180deg);			
    		}

# 三.伪元素 与 居中例子 #

## 3.1伪元素 插入一个元素标签 ##

在.door-left和.door-right上加一个元素，设置如下代码样式

.door-left::before,
    		.door-right::before {   /*伪元素 插入一个元素标签*/
    			content: '';   /*这个一定要写 不然画的圆圈显示不出来*/
    			position: absolute;
    			top: 50%;    /*此元素的顶部在父元素中间*/
    			width: 20px;
    			height: 20px;
    			border:1px solid black;
    			border-radius: 50%;            /*圆角*/
    			transform:translateY(-50%);   /*上移自身的50%*/
    		}

## 3.2居中例子 ##

.door-left::before,
    		.door-right::before {   /*伪元素 插入一个元素标签*/
    			top: 50%;    /*此元素的顶部在父元素中间*/     
    			transform:translateY(-50%);   /*上移自身的50%*/
    		}

发表评论取消回复

表情：

评论列表（有 0 条评论，43人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS2D转换

文章目录 2D转换 2D 转换之移动 translate 2D 转换之旋转 rotate 2D

柔情只为你懂/ 2024年03月17日 18:29/ 0 赞/ 214 阅读

相关【枚举+exgcd】牛客练习赛33 C D

[牛客练习赛113\_ACM/NOI/CSP/CCPC/ICPC算法编程高难度练习赛\_牛客竞赛OJ (nowcoder.com)][113_ACM_NOI_CSP_CCPC_

Love The Way You Lie/ 2024年03月17日 17:40/ 0 赞/ 98 阅读

相关笔记33-HTML&CSS

HTML标签：表单标签表单：概念：用于采集用户输入的数据的。用于和服务器进行交互。 form：用于定义表单的。可以定义一个范围，范围

古城微笑少年丶/ 2023年10月07日 16:47/ 0 赞/ 118 阅读

相关 3D移动translate3d（CSS3）

3D移动translate3d（CSS3） <!DOCTYPE html> <html lang="en"> <head>

叁歲伎倆/ 2023年10月03日 13:39/ 0 赞/ 151 阅读

相关 CSS3-3D

一.平移translate3d() /transform: translate3d(x,y,z); x和y可以是px可以是% z只能是px/ tra

冷不防/ 2023年07月10日 11:09/ 0 赞/ 44 阅读

相关 CSS3-2D

一.兼容性问题： div { transform: translate(50px,100px); -ms-transform:

た入场券/ 2023年07月10日 08:59/ 0 赞/ 100 阅读

相关 css 2d转换_使用CSS进行2D转换

css 2d转换 CSS | 2D转换 (CSS | 2D Transformation) 2D transformation in CSS allows you to

蔚落/ 2023年03月05日 12:35/ 0 赞/ 107 阅读

相关 CSS3 2D/3D转换

Internet Explorer 10、Firefox 以及 Opera 支持 transform 属性。 Chrome 和 Safari 需要前缀 -webkit-。

分手后的思念是犯贱/ 2022年09月21日 05:36/ 0 赞/ 433 阅读

相关 css3_2d

1. 2d-旋转 <div class="rotate">rotate</div> .rotate\{width:200px;height:100px;border:1p

我不是女神ヾ/ 2022年05月25日 05:12/ 0 赞/ 328 阅读

相关 CSS 3D House

代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or

电玩女神/ 2021年11月11日 23:32/ 0 赞/ 313 阅读